I need to fix some elements always at the end of the first row on flex container (with flex-wrap: wrap).
Examples (pay attention on button "Expand" ):
I tried to use 'row-reverse' + 'order: -1', but in this case, elements moved to the new row from left to right (when I need from right to left).
Here is my snippet: https://jsbin.com/divavosafu/1/edit?html,css,output
Any ideas?
Just nest the numbered buttons in an element and make both it and the main container a flex container:
.container {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
resize: horizontal;
overflow: auto;
}
.numbers {
display: flex;
flex-flow: row wrap;
}
.expand {
flex: 1 1 auto;
}
.right {
flex: 0 0 auto;
}
.item {
display: inline-block;
margin: 4px;
padding: 8px;
border: 1px solid gray;
}
<div class="container">
<div class="numbers">
<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 class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<div class="expand">
<div class="item">Expand</div>
</div>
<div class="right">
<div class="item right1">Right 1</div>
<div class="item right2">Right 2</div>
</div>
</div>
Looks like I found something similar to solution, but button "Expand" should be in the left "container"
.container {
display: inline-block;
width: 100%;
}
.right {
float: right;
}
.item {
display: inline-flex;
padding: 8px;
border: 1px solid #CECECE;
}
.item:not(:last-child) {
margin-right: 8px;
margin-top: 8px;
}
<div class="container">
<div class="right">
<div class="item expand">Expand</div>
<div class="item ">Right 1</div>
<div class="item ">Right 2</div>
</div>
<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 class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
Related
Here is all code example ->
https://codepen.io/mihailovic-aleksandar/pen/eYVREwE
What do I need? First I have a problem with margin, negative margin.
I need the to item be full width 33.3%
To solve the negative margins.
I want each item to be exactly 33.3% and to be full length. It's 32% for me at the moment, and if I set it to 33.3%, it's a shortcut to a new line.
.container {
display: flex;
flex-wrap: wrap;
height: 165px;
width: 100%;
}
.item {
background: red;
display: flex;
align-items: center;
justify-content: center;
width: 32%;
height: 75px;
background: #f4f4f4;
margin: 3px;
border-radius: 10px;
}
<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 class="item">6</div>
<div class="item"> 7</div>
</div>
Even a measly 3px of margin will make your flex items wrap to a new line when using width: 33%. You can use width: calc(100%/3) to make them exactly 33.33% but you will have to remove the static left and right margin.
.container {
display: flex;
flex-wrap: wrap;
height: 165px;
width: 100%;
}
.item {
background: red;
display: flex;
align-items: center;
justify-content: center;
width: calc(100%/3);
margin: auto auto .5em auto;
height: 75px;
background: #f4f4f4;
}
<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 class="item">6</div>
<div class="item">7</div>
</div>
If you want to have spacing you can use width: calc(100%/3.1) on item with margin: auto so they're centered. The .1 accounts for some spacing. Another option would be to use width: calc(100%/3 - 6px); to account for margin: 3px;.
.container {
display: flex;
flex-wrap: wrap;
height: 165px;
width: 100%;
}
.item {
background: red;
display: flex;
align-items: center;
justify-content: center;
width: calc(100%/3 - 6px); /* -6px accounts for margin: 3px; i.e., top + bottom at 3px = 6px */
margin: 3px;
height: 75px;
background: #f4f4f4;
}
<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 class="item">6</div>
<div class="item">7</div>
</div>
if you want to include the margin (though you should include a gap over a margin), you need to use calc(33.33% - 6px) as width
.container {
display: flex;
flex-wrap :wrap;
height: 165px;
width: 100%;
}
.item {
background: red;
display: flex;
align-items: center;
justify-content: center;
width: calc(33.33% - 6px);
height: 75px;
background: #f4f4f4;
margin: 3px;
border-radius: 10px;
}
<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 class="item">6</div>
<div class="item"> 7</div>
</div>
You can use a container for your items and give them width:33.33% and set margin to your items.
Here is an example based on your pen :
.container {
display: flex;
flex-wrap :wrap;
height: 165px;
width: 100%;
}
.item-container {
display: flex;
width: 33.33%;
height: 75px;
}
.item{
width:100%;
margin: 3px;
display: flex;
align-items: center;
justify-content: center;
background: #f4f4f4;
border-radius: 10px;
}
<div class="container">
<div class="item-container">
<div class="item">1</div>
</div>
<div class="item-container">
<div class="item">2</div>
</div>
<div class="item-container">
<div class="item">3</div>
</div>
<div class="item-container">
<div class="item">4</div>
</div>
<div class="item-container">
<div class="item">5</div>
</div>
<div class="item-container">
<div class="item">6</div>
</div>
<div class="item-container">
<div class="item">7</div>
</div>
</div>
I was trying to create a list / table view with dynamic width using flexbox, and encountered a behavior I couldn't really wrap my head around. The result I'm trying to achieve is a width that fits the content of the list, at its' widest point.
.main {
width: auto;
background: rgb(233, 148, 148);
display: inline-flex;
flex-wrap: wrap;
}
.container {
display: flex;
width: 100%;
}
.label,
.value {
flex: 1;
padding: 4px;
}
.label {
text-align: end;
border-right: 2px solid red;
}
.value {
text-align: start;
}
<div>
<div class="main">
<div class="container">
<div class="label">Some Label</div>
<div class="value">Some value</div>
</div>
<div class="container">
<div class="label">Some label 2</div>
<div class="value">Other val</div>
</div>
<div class="container">
<div class="label">Third label</div>
<div class="value">
<div>N/A</div>
</div>
</div>
</div>
</div>
What it boils down to, is that the width seems to be determined by the total characters count, and not the widest point, as I would expect. You can edit the HTML and remove the N/A, for example, and the width will decrease.
When I switch to display: inline-block with white-space: nowrap, the width is as expected, but the "columns" are not aligned.
.main {
width: auto;
background: rgb(233, 148, 148);
display: inline-block;
white-space: nowrap;
}
.container {
display: flex;
width: 100%;
}
.label,
.value {
flex: 1;
padding: 4px;
}
.label {
text-align: end;
border-right: 2px solid red;
}
.value {
text-align: start;
}
<div>
<div class="main">
<div class="container">
<div class="label">Some Label</div>
<div class="value">Some value</div>
</div>
<div class="container">
<div class="label">Some label 2</div>
<div class="value">Other val</div>
</div>
<div class="container">
<div class="label">Third label</div>
<div class="value">
<div>N/A</div>
</div>
</div>
</div>
</div>
What causes the large width to occur when the display is inline-flex? Is there a way to get the behavior I'm trying to achieve? I know it can probably be resolved with display: grid, but I'm looking for a simpler solution.
I know it can probably be resolved with display: grid, but I'm looking for a simpler solution.
It might be difficult if you do not handle the grid-layout fine enough yet, but it looks not that much complicated if you use the grid system ;)
For the width, look at max-content.
simple example:
.main {
width: max-content;
background: rgb(233, 148, 148);
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.label,
.value {
padding: 4px;
}
.label {
text-align: end;
border-right: 2px solid red;
}
.value {
text-align: start;
}
<div>
<div class="main">
<div class="container">
<div class="label">Some Label</div>
<div class="value">Some value</div>
</div>
<div class="container">
<div class="label">Some label 2</div>
<div class="value">Other val</div>
</div>
<div class="container">
<div class="label">Third label</div>
<div class="value">
<div>N/A</div>
</div>
</div>
</div>
</div>
In the past ,before flex & grid , display would use the table-layout.
.main {
display:table;
background: rgb(233, 148, 148);
}
.container {
display: table-row;
}
.label, .value {
padding: 4px;
display:table-cell;
}
.label {
text-align: end;
border-right: 2px solid red;
}
.value {
text-align: start;
}
<div>
<div class="main">
<div class="container">
<div class="label">Some Label</div>
<div class="value">Some value</div>
</div>
<div class="container">
<div class="label">Some label 2</div>
<div class="value">Other val</div>
</div>
<div class="container">
<div class="label">Third label</div>
<div class="value">
<div>N/A</div>
</div>
</div>
</div>
</div>
I want to create a grid layout with grid or flexbox like the images below, if the items are wrapped to new line, ones in the second line must be horizontally centered.
I tried something like this but it doesn't work.
.custom-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.content {
width: 90px;
height: 90px;
background: red;
margin: 20px;
}
<div class="custom-grid">
<div class="grid-item">
<div class="content">hello</div>
</div>
<div class="grid-item">
<div class="content">hello</div>
</div>
<div class="grid-item">
<div class="content">hello</div>
</div>
<div class="grid-item">
<div class="content">hello</div>
</div>
<div class="grid-item">
<div class="content">hello</div>
</div>
</div>
The trick is to use wrap and justify-content.
.wrapper {
display: flex;
background: green;
width: 150px;
flex-wrap: wrap;
justify-content: space-around;
}
.child {
width: 50px;
height: 50px;
background: red;
}
<div class="wrapper">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
Here is a fiddle: https://jsfiddle.net/9qwa1r8u/1/
Hope that helps :-)
You can try a flex layout like below:
.grid {
display: flex;
flex-wrap:wrap;
justify-content:center;
}
.grid > div {
flex:0 1 calc(100%/3);
padding:10px;
box-sizing:border-box;
}
.content {
width: 90px;
height: 90px;
background:red;
margin:auto;
}
<div class="grid">
<div class="grid-item">
<div class="content"></div>
</div>
<div class="grid-item">
<div class="content"></div>
</div>
<div class="grid-item">
<div class="content"></div>
</div>
<div class="grid-item">
<div class="content"></div>
</div>
<div class="grid-item">
<div class="content"></div>
</div>
</div>
I am trying to create "shopping items" embedded in a div that have a certain fixed width and height. I know that you can do display: inline !important; to keep the div's on one line.
However, how can I make it such that it breaks when the window size becomes smaller, preferably when the outer div is smaller?
Here is an illustration:
Here is what I tried:
<div class="row">
<div class="col-sm-12">
<div class="items">
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
</div>
</div>
</div>
and css:
.items {
display: flex !important;
flex-wrap: wrap !important;
-webkit-flex-wrap: wrap !important;
-moz-flex-wrap: wrap !important;
-o-flex-wrap: wrap !important;
-ms-flex-wrap: wrap !important;
}
.item {
width: 200px !important;
height: 500px !important;
margin: 10px !important;
text-align: center !important;
}
With flex you can also set a breaking point (without mediaquerie) when boxes reaches 200px of width and also span them on the whole line:
(bootstrap included in snippet , i do not really see troubles there)
.row {
text-align: center;
}
.items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.item {
/* with a breaking point at 200px width */
min-width: 200px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
/* or without min-width nor flex, just:
width:200px; it will wrap everytime needed and boxes will keep a static width */
height: 150px;/* none or whatever*/
margin: 10px 30px;/* whatever*/
text-align: center;
border: solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-12">
<div class="items">
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
</div>
</div>
</div>
So easy like that;
float: left;
You can use CSS Flexbox. Its handles it easily.
Have a look at the snippet below (resize your browser to see them in action):
.outer {
display: flex;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 100px;
padding-top: 10px;
text-align: center;
background: #eee;
border: 3px solid #aaa;
margin: 20px;
}
body {
padding: 20px;
}
<div class="outer">
<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 class="item">6</div>
</div>
Hope this helps!
As an alternative to the other options I would suggest a look at isotope (http://isotope.metafizzy.co/). The benefits of using this over a pure css solution would become more apparent if you decided to include any filtering or sorting of your shopping items.
You can use flex-basis to ensure your elements are always 200px if it cannot grow nor shrink.
Using the flex shorthand property:
flex: 0 0 200px; /* 'flex-grow: 0' 'flex-shrink: 0' 'flex-basis: 200px' */
.items {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item {
box-sizing: border-box;
flex: 0 0 200px; /* <'flex-grow'> <'flex-shrink'> <'flex-basis'> */
height: 100px;
margin-bottom: .5em; /* Space between flex-items vertically*/
text-align: center;
border: 2px dashed grey;
}
<div class="row">
<div class="col-sm-12">
<div class="items">
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
</div>
</div>
</div>
Notes:
In the demo we use the recommended syntax, which is using
the flex shorthand property.
Do not overuse the !important flag. It should not be needed in any of your classes.
Removed vendor prefixes for demo simplicity.
I'm trying to figure out how to make a table have a bottom horizontal scroll bar. This is my HTML:
<div class="grid-block table">
<div class="grid-block header">
<div class="grid-block small-2 column">
times 6
</div>
</div>
<div class="grid-block row">
<div class="grid-block small-2 column">
times 6
</div>
</div>
</div>
I have used this CSS thinking it would fix my problem.
.table {
overflow: auto !important;
width: 1400px !important;
}
I've added the importants at the moment just to make sure these stylings are applied.
I should also point out that every element here is a flex item.
Cheers
This code might help you get started.
.wrapper {
width: 100%;
overflow: auto;
white-space: nowrap;
font-size: 0;
}
.wrapper .child {
font-size: 1rem;
height: 50px;
width: 60px;
display: inline-block;
background-color: cornflowerblue;
text-align: center;
border: 1px solid coral;
margin-left: 10px;
}
.wrapper .child:first-child {
margin-left: 0px;
}
<div class="wrapper">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
</div>