I have two divs present inside a parent div. The first div has an absolutely positioned image, whereas the other has some text content. I want the content of the parent div to wrap. So this is what I set:
.item-content {
display: flex;
flex-wrap: wrap;
}
.image-container {
flex-basis: 48%;
position: relative;
border: 2px solid red;
}
.image {
display: block;
position: absolute;
left: -100px;
}
.text-content {
margin: 0px auto;
flex-basis: 43%;
}
<div className="item-content">
<div className="image-container">
<img src={desktopImage} alt="" className="image " />
</div>
<div className="text-content">
<h2>{title}</h2>
<p>{subtitleText}</p>
<div className="divider" />
<h5>The challenge</h5>
<p className="description">{description}</p>
</div>
</div>
But, this doesn't make the content wrap when the screen size changes. How can I make the 'text-content' class wrap?
If you want all the content inside <div class="text-content"> to wrap then you just need to add the flex-wrap property to all the elements inside.
.text-content *{
display:flex;
flex-wrap:wrap;
}
Related
Hi I am creating a website and I am trying to align a picture and some text vertically, but I am not being able to do this and the picture is only taking 100% space of the website, this is the code:
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100vw;
display: flex;
}
div.column1 {
width: 15%;
background-color: #F7F7F7;
overflow: hidden;
height: 100vh;
}
div.column2 {
width: 70%;
overflow: hidden;
}
.banner {
width: 100vw;
height: 10vh;
}
.container2 {
display: flex;
}
<div class="content">
<div class="column1">
</div>
<div class="column2">
<div class="container2">
<div class="lobby">
<img src="img/lobby.jpg" alt="" /> </div>
<div class="content">
<p>lorem50gsdgsdsgdgsgdfgdfgdfgdfgfdggsd</p>
</div>
</div>
</div>
<div class="column1">
</div>
</div>
The website is divided into 3 columns and I am putting the content on the middle one.
Shouldn't the display flex align them vertically? Why is it not working? Thank you in advance!
You need to set align-items:center on flex parent in order to vertically center its children. Check this for more details about flex-container, and this for more general info about flexbox
You can add justify-content:center for horizontal alignment.
Since you are using display: flex to the content div, add just the property align-items:center and your text will be centred vertically:
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100vw;
display: flex;
align-items:center;
}
div.column1 {
width: 15%;
background-color: #F7F7F7;
overflow: hidden;
height: 100vh;
}
div.column2 {
width: 70%;
overflow: hidden;
}
.banner {
width: 100vw;
height: 10vh;
}
.container2 {
display: flex;
}
<div class="content">
<div class="column1">
</div>
<div class="column2">
<div class="container2">
<div class="lobby">
<img src="img/lobby.jpg" alt="" /> </div>
<div class="content">
<p>lorem50gsdgsdsgdgsgdfgdfgdfgdfgfdggsd</p>
</div>
</div>
</div>
<div class="column1">
</div>
</div>
In order to make it work, try to think with me ok? In order to you understand what is happening here:
First of all if you have a parent div its children should be one bellow one another
Your first step is to set the div to have flex: 1, flex check it out this website to learn more.
now set the items to be side by side with display: flex
set the same container with justify-content: center and align-items:center
and if you wish to align the div to the middle of your page, try this: margin: 0 auto
Here is where the magic happens: flex-direction: column, check the documentation flex-direction
Why .itm in this case take width 400px instead of 160px? In other cases div take same width like child, but when img is bigger and browser scale it - I got empty space
How to fix it? I fount only one way: set <img height="..." width="..." />, but I want more more suitable way because I don't know real image size.
.box {
display: flex;
}
.box .itm {
max-height: 400px;
max-width: 400px;
background: red;
margin-right: 10px;
}
.box .itm img {
max-height: 100%;
max-width: 100%;
}
.box .itm .tst {
width: 160px;
height: 400px;
background: lime;
}
<div class="box">
<div class="itm">
<img src="https://picsum.photos/300/750"/>
</div>
<div class="itm">
<div class="tst">same block with 160x400 sime like img</div>
</div>
</div>
Problem
As the flex items do not have width or flex-basis properties defined, flex container space distributed as first element will take the max-width size, and the second item will take the remaining space.
Solution
Add width and flex-basis properties to flex items
I didn't understand why this is happening
I fixed this by moving the max-width directly to each image. In my case, this solves the problem, but it would not help if there was not only a picture but also other content in the container.
.box {
display: flex;
}
.box .itm {
display: flex;
background: red;
margin-right: 10px;
}
.box .itm img {
max-height: 400px;
max-width: 400px;
}
.box .itm .tst {
width: 160px;
height: 400px;
background: lime;
}
<div class="box">
<div class="itm">
<img src="https://picsum.photos/300/750"/>
</div>
<div class="itm">
<div class="tst">same block with 160x400 sime like img</div>
</div>
</div>
In the following html I want the txt-box div to be centered in the container, overlay the image, and expand to fill the container. It should have a margin of equal width on all sides allowing part of the image to show like a thick border.
The html shown is passable for what I want except the vertical vs. horizontal margins are always slightly different as the browser window is resized.
I feel like what I have here is a hack and that I am using flex-grow incorrectly. I understand flex-grow works to allow the txt-box div to expand since it is the only element with a grow value. If I can get that resolved I should be able to simply set a margin on txt-box and it should work.
What am I not understanding about flex-grow?
.container {
display: flex;
align-items: center;
justify-content: center;
border: solid 2px red;
position: relative;
}
.container img {
width: 100%;
flex-grow: 0;
flex-shrink: 0;
}
.txt-box {
background-color: white;
display: flex;
padding: 5px;
border: solid 2px blue;
flex-grow: 1;
position: absolute;
width: 90%;
height: 80%;
}
<div class="container">
<img src="blocks.png" />
<div class="txt-box">
hello world
</div>
</div>
Thanks to Michael Benjamin for putting me on the path to enlightenment. I finally got it figured out. My original question was actually a portion of what I was trying to accomplish. The answers are to use background-image:url('...') and make sure the table and row elements are display:flex.
JSFiddle
<html>
<head>
<style>
.flex-table {
flex-flow:column;
}
.flex-row {
flex-flow:row;
}
.container {
align-items: center;
justify-content: center;
padding: 20px;
border: solid 2px red;
background-image:url('https://i.imgur.com/BF3ty6o.jpg');
background-size:cover;
background-repeat:no-repeat;
max-width:500px;
}
.txt-box {
justify-self:stretch;
align-self:stretch;
border: solid 2px blue;
background-color: rgba(192,192,192,0.5);
}
body, .flex-table, .flex-row, .container, .txt-box {
display:flex;
flex-grow:1;
}
#media (max-width: 768px) {
.flex-row {
flex-flow:column;
}
}
</style>
</head>
<body>
<div class="flex-table">
<div class="flex-row">
<div class="container">
<div class="txt-box">
hello world 1
</div>
</div>
<div class="container">
<div class="txt-box">
hello world 2
</div>
</div>
<div class="container">
<div class="txt-box">
hello world 3
</div>
</div>
</div>
<div class="flex-row">
<div class="container">
<div class="txt-box">
hello world 4
</div>
</div>
<div class="container">
<div class="txt-box">
hello world 5
</div>
</div>
<div class="container">
<div class="txt-box">
hello world 6
</div>
</div>
</div>
</div>
</body>
</html>
What am I not understanding about flex-grow?
Flex properties don't work on absolutely positioned children of a flex container.
ยง 4.1. Absolutely-Positioned Flex
Children
As it is out-of-flow, an absolutely-positioned child of a flex
container does not participate in flex layout.
Therefore, flex-grow: 1 on txt-box is not doing anything. It's just being ignored.
Considering that you want the image simply laying in the background, while the text box has more requirements, I would suggest absolutely positioning the image and leaving the text box in the normal flow.
Then give the text box full width and height, with equal padding on the primary container to keep uniform "margins" across screen sizes.
Here's a demo, with a few extra features to help illustrate the concepts involved.
body {
height: 100vh;
display: flex;
margin: 0;
padding: 10px;
}
.container {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
border: solid 2px red;
}
img {
position: absolute;
height: 100%;
width: 100%;
object-fit: contain; /* also try 'cover' for demo */
}
.txt-box {
z-index: 1;
width: 100%;
height: 100%;
border: solid 2px blue;
background-color: rgba(192,192,192,0.5);
}
* {
box-sizing: border-box;
}
<div class="container">
<img src="http://i.imgur.com/60PVLis.png">
<div class="txt-box">hello world</div>
</div>
jsFiddle demo
I am trying to create a simple element consisting of 3 columns, the 3. column being an icon-image.
I want the element to be responsive, but the icon-image should always have the same size (e.g. 40x40 px).
So, the 1. and 2. column should have % values, the 3. column should have width 40px. I don't want the icon-image to resize on smaller screens. The icon should always have width 40px.
.container {
width: 80%;
}
.text1 {
float: left;
width: 30%;
}
.text2 {
float: left;
width: 50%;
}
.image {
float: right;
width: 120px;
}
<div class="container">
<p class="text1">Some Titel</p>
<h3 class="text2">Some Text and some more text...</h3>
<img src="image1.jpeg" alt="" class="image" />
</div>
https://jsfiddle.net/mkrizanek/usfmk6r7
Kind regards,
Milan
I have tweaked a little bit with HTML and CSS. But I hope you will get the logic. I have changed the display-type of container to flex. You can change the with of elements inside container as per your requirements.
.container {
background-color: #DDDDDD;
width: 80%;
display: flex;
}
.text {
background-color: #BBBBBB;
width: 50%;
}
.heading {
background-color: #999999;
width: 50%;
}
img {
max-width: 120px;
max-height: 120px;
}
<div class="container">
<p class="text">Some Text</p>
<h3 class="heading">Heading</h3>
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="image" />
</div>
Your best option is probably to use flex.
Set "display: flex; justify-content: space-between" on the container div, and "flex: 1;" on each section that you want responsive.
If you want the text in the second div to push all the way to the image, you can also add "text-align: right;" to it.
.container {
display: flex;
justify-content: space-between;
}
.text1 {
flex: 1;
}
.text2 {
flex: 1;
}
.image {
width: 40px;
height: 40px;
background: #088;
}
<div class="container">
<p class="text1">Some Title</p>
<h3 class="text2">Some Text and some more text...</h3>
<img alt="" class="image" />
</div>
Here is a good resource for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
I have a container with a variable number of elements in it.
The elements should be justified but with a fix space between (e.g. 20px).
That means the width of every element has to adapt.
For example this:
HTML
<div class="container">
<div>
<img src="...">
</div>
<div>
<img src="...">
</div>
<div>
<img src="...">
</div>
</div>
CSS
div.container {
text-align: justify;
}
div.container div {
display: inline-block;
margin-right: 20px;
}
div.container div img {
width: 100%;
}
At the end it should look like this (this picture shows two examples: 2 elements and 3 elements; the width is dynamic but the space fix [20px]):
It should work with a different number of child elements.
Is there a professional way to do this with CSS?
EDIT: I should mention that this fix space is a %-value!
If using Flexbox is an option, you could add flex: 1 to the flex items and also a margin property with a fixed value as follows:
EXAMPLE HERE
div.container { display: flex; }
div.container div {
height: 50px; /* Just for demo */
flex: 1;
margin-left: 20px;
}
div.container :first-child { margin-left: 0; }
Actually, flex: 1 is a shorthand of flex-grow: 1; in this case.
You can use display: table and display: table-cell for this:
.container {
display: table;
width: 100%;
border-spacing: 10px 0;
border-collapse: separate;
background: palevioletred;
}
.container div {
display: table-cell;
}
.container img {
display: block;
width: 100%;
height: auto;
}
<div class="container">
<div><img src="//dummyimage.com/200x100/000/CCC"></div>
<div><img src="//dummyimage.com/300x100/000/CCC"></div>
<div><img src="//dummyimage.com/400x100/000/CCC"></div>
</div>
<hr/>
<div class="container">
<div><img src="//dummyimage.com/200x100/000/CCC"></div>
<div><img src="//dummyimage.com/400x100/000/CCC"></div>
</div>
<hr/>
<div class="container">
<div><img src="//dummyimage.com/600x100/000/CCC"></div>
</div>