I have a container of items with the following style:
.container-ok {
display: flex;
flex: 0 1 auto;
flex-direction: column;
align-items: flex-end;
}
.container-error {
display: flex;
flex: 0 1 auto;
flex-direction: column;
justify-content: flex-end;
}
.item {
width: 3rem;
border: 1px black solid;
}
<div class="container-ok">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container-error">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
I'm expecting that all the items in the container are rendered in one column and are on the right side, but it's not working. When I remove flex-direction, it works but I have as example 3 items and they are in a row (3 columns) not one column. If I remove justify-content and replace it with align-items, it works. But align-items is for vertical alignment.
What am I doing wrong?
thank you
If I understood you right, you want to achieve this result
HTML
<div class="container-ok">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container-error">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
CSS
.container-ok {
display: flex;
flex: 0 1 auto;
justify-content: flex-end;
}
.container-error {
display: flex;
flex: 0 1 auto;
justify-content: flex-end;
}
.item {
width: 3rem;
border: 1px black solid;
}
Also there is a nice guide to flexbox, maybe it will help you
Justify content declaration works because it defines the alignment along the main axis. Instead justify content not work because It defines the default behaviour for how flex items are laid out along the cross axis on the current line. You can think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).
Related
I have a flex-boxes layout that grows the boxes in the final "row", like here:
Screenshot
The CSS:
.container {
display: flex;
flex-flow: row wrap;
align-items: stretch;
}
.item {
flex-grow: 1;
flex-shrink: 0;
display: inline-block;
position: relative; width: 14em; height: 14em; min-width: 14em;
}
The question: can one indicate in such a row flow to preferably grow the "first" flex-items rather than the "last" ones (via CSS not JS)?
You can add flex-wrap: wrap-reverse; in the container class, and in your html add the elements in reverse order
.container {
display: flex;
flex-flow: row wrap;
align-items: stretch;
flex-wrap: wrap-reverse;
}
<div class="container">
<div class="item">5</div>
<div class="item">4</div>
<div class="item">3</div>
<div class="item">2</div>
<div class="item">1</div>
</div>
I have a container with items inside it.
This container has a height set. I'd like to wrap the items inside this container to a new column by maintaining the order of them to the next column. How do I do this?
For example, if I have 5 items, I'd like to wrap them like this:
1 4
2 5
3
and not like
1 2
3 4
5
Here is a photo for a reference:
From this photo, I'd like to create a new column with the 11th and 12th item
You can use flexbox with flex-direction: column:
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 20rem;
width: 20rem;
border: 1px solid black;
padding: 5px;
gap: 5px;
}
.item {
font-size: 5rem;
border: 1px solid black;
text-align: center;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
This question already has answers here:
How can I show three columns per row?
(4 answers)
Closed 1 year ago.
I am looking for a way (with Flexbox, not Grid) to create a layout, when I have a container with x cards inside, and each card inside should take 1/3 of the container width. So cards number 1,2,3 will be in the first row, cards number 4,5... in the second row etc.
I feel like it is impossible with flexbox, I don't wanna do some checks for number of items, I used map to map cards in containers of max 3 cards but I didn't like the solution. Before I move to using grid, I would love to get some insight if it is possible to acomplish with Flexbox.
The code is:
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
you should set box-sizing: border-box; on the cards so padding and borders are calculated in their width. and set their max-width: 33.33%.
body {
padding: 30px;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
background: orange;
}
.card {
box-sizing: border-box;
width: 100%;
text-align: center;
max-width: 33.33%;
padding: 50px 0;
background-color: aqua;
border: 1px solid #000;
}
<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
The difference will be for the second row. There are two options for the last two element width.
Option 1 Last two nodes take 33% width only and leave the right side blank.
You have to use display: flex; flex-wrap: wrap; for .container and display: flex; flex: 0 1 33%; for the child element, which is .card.. Here flex-shrink is to be set for child
.container {
display: flex;
flex-wrap: wrap;
}
.card {
height: 100px;
display: flex;
flex: 0 1 33%;
justify-content: center;
align-items: center;
font-size: 50px;
}
<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
Option 2 Last two element use 50% width each.
You have to use display: flex; flex-wrap: wrap; for container and display: flex; flex: 1 0 33%; to the child element, which is .card. Here flex-grow is to be set for child
.container {
display: flex;
flex-wrap: wrap;
}
.card {
height: 100px;
display: flex;
flex: 1 0 33%;
justify-content: center;
align-items: center;
font-size: 50px;
}
<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
Flex-wrap can help you with that
.container{
display: flex;
flex-wrap: wrap;
}
.card{
min-width: 33.3333%;
}
Example here: https://codepen.io/jriches/pen/WNjVaav
Use 33.33333333% width in your card class.
So I have a code like this more or less
<div class="content">
<div class="c1">
<div>
<div class="c2">
<div>
<div class="c3">
<div>
<div class="c4">
<div>
</div>
By using flex, can I do this?
<c1> <c3>
<c2> <c4>
I know I can use <ul> or <table>, but I am just wondering if I can do it using flex. I have tried using flex but cannot accomplish it.
DEMO
Yes, this is possible with Flexbox - Set a height on the .content and the child divs (e.g. content: 100px, divs 50px) and specify flex-flow: column wrap
.content {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column wrap;
align-content: stretch;
height: 100px;
}
.content div {
height: 50px;
width: 50px;
}
Flex-flow is shorthand for flex-direction and flex-wrap.
Flex-direction sets the direction - row, column, row-reverse, column-reverse.
Flex-wrap wraps the flexible items (or not). By default this is nowrap, the demo uses wrap and you can also use wrap-reverse
You can achieve this by modifying your markup to the following structure:
<div class="content">
<div class="left-col">
<div class="c1"><div>
<div class="c2"><div>
</div>
<div class="right-col">
<div class="c3"><div>
<div class="c4"><div>
</div>
</div>
Now you have two columns. Simply add the following styles to your CSS:
.content {
display: flex;
justify-content: space-between; // or whatever you want
flex-direction: row; // row is the default value, so you don't need to specify it. It will place the cols beside each other.
}
.left-col, .right-col {
display: flex;
flex-direction: column;
}
By specifying flex-direction: column; the elements will be positioned below each other.
Here's some great resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Maybe you also want to check out the new native grid-layout: https://www.w3schools.com/css/css_grid.asp
You can easily do this with CSS grid, this is in my opinion more useful to use but this is the code that uses CSS grid
HTML
<div class="content">
<div class="c1">test 1</div>
<div class="c2">test 2</div>
<div class="c3">test 3</div>
<div class="c4">test 4</div>
</div>
CSS:
.content {
display: grid;
grid-template-columns: 1fr 1fr;
}
And what about this trick ?
.content
{
display: flex;
flex-direction: column;
height: 50px;
flex-wrap: wrap;
}
<div class="content">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c3">3</div>
<div class="c4">4</div>
</div>
Yes you can do please consider below code.
HTML
<div class="content ">
<div class="col-12 d-flex justify-content-between">
<div class="c1 col-6 text-center">c1
</div>
<div class="c2 col-6 text-center">c2
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<div class="c3 col-6 text-center">c3
</div>
<div class="c4 col-6 text-center">c4
</div>
</div>
</div>
CSS
.justify-content-around {
-ms-flex-pack: distribute!important;
justify-content: space-around!important;
}
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
I want to make a two column html structure like the following picture:
The numbers inside each box means the order of the div's in the html markup.
The challenge is that I want to have a different sort order on a mobile device. For example, on a mobile device, number 4 should be below number 1 without changing the html. I think using flexbox should be the best way to achieve this. But I couldn't make it work.
Using floats isn't the way, because at the first side when there is some space, the next div will automatic float to that side.
I also cannot make extra wrapper's for each column, because using order will not work then.
Does somebody has an idea?
* {
box-sizing: border-box;
}
.row {
display: inline-block;
width: 100%;
}
.item {
border: 1px solid #000;
width: 50%;
float: left;
}
<div class="row">
<div style="height:200px;" class="item">1</div>
<div style="height:150px;" class="item">2</div>
<div style="height:100px;" class="item">3</div>
<div style="height:50px; float:right;" class="item">4</div>
<div style="height:75px; float:right;" class="item">5</div>
<div style="height:150px; float:right;" class="item">6</div>
</div>
The code below features:
A column-direction flex container
Flex items wrap at viewport height
On smaller screens (based on height or width), the fourth item moves to the second position in the visual order, and the items align in a single full-width column.
* {
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
max-width: 100vw;
}
.item {
width: 45%;
margin: 5px;
border: 1px solid #000;
}
#media ( max-width: 500px ), ( max-height: 500px ) {
.row { flex-direction: row; }
.item { flex-basis: 100%; }
.item:nth-child(1) { order: -2; }
.item:nth-child(4) { order: -1; }
}
<div class="row">
<div style="height:200px;" class="item">1</div>
<div style="height:150px;" class="item">2</div>
<div style="height:100px;" class="item">3</div>
<div style="height:50px;" class="item">4</div>
<div style="height:75px;" class="item">5</div>
<div style="height:150px;" class="item">6</div>
</div>
jsFiddle