I am making a row with the columns, but having some problems with the width. The row has 2 columns, where the left one has a transparent pink color.
The problem is that the pink background-color is going over the <div class="flex-wrap">. I would like that everything I do within the class="flex-wrap" is staying in there. So the columns should not go over the border.
As I see it is on the row where it is wrong? I can see the margin-left: 0px;, but then the problem is on the right side, when the viewport is getting smaller.
Does somebody have a clue how to solve this?
I have made a working JSFiddle her
.flex-wrap .row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.flex-wrap .row>[class*='col-'] {
display: flex;
flex-direction: column;
}
.section {
border: 1px solid #B9B9B9;
}
<div class="container">
<div class="section">
<div class="flex-wrap">
<div class="row">
<div class="col-xs-12 col-sm-3" style="background-color: rgba(201, 76, 76, 0.3);">
<h3>Here is a headline</h3>
</div>
<div class="col-xs-12 col-sm-9">
<img src="https://www.q95da.com/uploads/4/5/7/0/45709989/published/6391827.jpg">
</div>
</div>
</div>
</div>
</div>
Related
I just came across this problem. Everything seems ok, but I don't understand where is the problem. Centering and aligning items at the same time are not good?
Only I wanted to write down 3 div in the column direction. I can not change the structure because I will try something with this structure.
This is how does it look like. https://codepen.io/vortovor/pen/ExXZMzR
.col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: pink;
}
.col>div {
background: #ddd;
<div class="row">
<div class="col">
<div class="top">
<div>Hello</div>
<div>I'm</div>
</div>
<div class="bottom">
<div>Here</div>
</div>
</div>
</div>
You are missing the height property in your .col add to your code
.col{
height: 500px;
border: 1px black solid;
}
so can see that is working fine:
.col {
height: 500px;
border: 1px black solid;
}
/* orginal CSS */
.col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div class="row">
<div class="col">
<div class="top">
<div>Hello</div>
<div>I'm</div>
</div>
<div class="bottom">
<div>Here</div>
</div>
</div>
</div>
the code is fine, what happens is the size of the content of your divs.
if you add a class to all your word divs
.a {
text-align: center;
border: 1px red solid;
width: 100px;
}
at the moment you have the width of each word which are different and you alignment is centre, therefore it looks like:
one
onelong
oneme
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 have a header with 2 rows of 2 Foundation columns of content, as below:
<div class="wrapper">
<div class="header row">
<div class="large-6 columns">
HEADER
</div>
<div class="large-6 columns">
menu
</div>
</div>
<div class="row">
<div class="large-5 none show-for-medium columns info">
Some information to the left
</div>
<div class="large-7 columns">
<div class="image-container">
<div class="image">
image to the right
</div>
</div>
</div>
</div>
</div>
The .header height is dynamic and not set. I want the .image element to take up 100% of the remaining vertical space.
eg:
To that affect I have tried using flex and flex-grow, eg:
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
}
.image-container {
flex-grow: 1;
}
but had no luck, see fiddle: https://jsfiddle.net/9kkb2bxu/46/
Would anyone know how I could negate the dynamic height of the header from the 100vh of the image container?
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
border: 1px solid black;
background-color: #ccc;
}
.row {
width: 100%;
}
.header {
background-color: green;
}
.info {
background-color: yellow;
border: 1px solid #ccc;
}
.image-container {
border: 1px solid black;
display: flex;
}
.image {
background-color: red;
flex-grow: 1;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="header row">
<div class="large-6 columns">
<h1>
HEADER
</h1>
</div>
<div class="large-6 columns">
<h1>
menu
</h1>
</div>
</div>
<div class="row">
<div class="large-5 none show-for-medium columns info">
Some information to the left
</div>
<div class="large-7 columns">
<div class="image-container">
<div class="image">
image to the right
</div>
</div>
</div>
</div>
</div>
Set the second row to take up the rest of the remaining height with flex: 1 and make sure you nest that flex with display: flex:
.row.target-row {
flex: 1;
display: flex;
}
Set the .image-container to 100% height of its column parent.
.image-container {
height: 100%;
}
By default both columns will expand. Stop the left column from expanding with:
.large-5 {
align-self: flex-start;
}
(flex-start reference: https://stackoverflow.com/a/40156422/2930477)
Complete Example
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
border: 1px solid black;
background-color: #ccc;
}
.row {
width: 100%;
}
.header {
background-color: green;
}
.info {
background-color: yellow;
border: 1px solid #ccc;
}
.image-container {
height: 100%;
background-color: red;
}
.large-5 {
align-self: flex-start;
}
.row.target-row {
flex: 1;
display: flex;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" />
<div class="wrapper">
<div class="header row">
<div class="large-6 columns">
<h1>
HEADER
</h1>
</div>
<div class="large-6 columns">
<h1>
menu
</h1>
</div>
</div>
<div class="row target-row">
<div class="large-5 none show-for-medium columns info">
Some information to the left
</div>
<div class="large-7 columns">
<div class="image-container">
<div class="image">
image to the right
</div>
</div>
</div>
</div>
</div>
flex-grow only applies to flex children.
.image-container isn't a direct child of a display: flex element, so that property has no effect.
Plus, it affects the flex axis, which is not what you want.
Instead, you need to put those two elements in their own flex row, and use align-items (on the parent) and align-self (on either child) so that the first one aligns (on the cross axis) to flex-start (stick to top) and the second one to stretch.
You'll also want that flex row (parent) to have flex-grow: 1 so that it stretches along the vertical flex axis of its parent (.wrapper) to fill the rest of the page (otherwise, the grandchild will have nothing to stretch to).
For more information, read a good flex tutorial.
div.wrapper > div:not(.header).row {
flex: 1; /* 1 */
display: flex; /* 1 */
}
div.large-7.columns {
display: flex; /* 2 */
}
div.image-container { /* 3 */
flex: 1;
}
div.large-5.show-for-medium { /* 4 */
align-self: flex-start;
}
jsFiddle
Notes:
flex container and items consume all remaining height of respective parents
give children full height (via align-items: stretch initial setting)
flex item consumes all available width
yellow box does not need to expand to full height; now set to content height
I played a bit with flexboxes and tried to imitate a LaTeX-like table with top/mid/bottomrule. I like that the table is scaling nicely and shift to a list-like display on small screens.
However, I noticed that, if I use a whitespace in a cell's text content, the cell's height might double or even triple without any aparent reason.
Is there a flexbox-property that I overlooked and can help me fix this behavior? Why is this additional height even generated?
Screenshot:
Snippet:
div.table {
display: flex;
flex-flow: column wrap;
width: 70%;
margin: 15px auto;
border-bottom: 2px solid black;
}
div.row {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
div.head {
flex: 1;
text-align: center;
align-items: flex-start;
font-weight: bold;
border-width: 2px 0 1px;
border-style: solid;
}
div.item {
flex: 1;
text-align: center;
align-items: flex-start;
}
<div class="table">
<div class="row">
<div class="head">Col 1</div>
<div class="head">Col 2</div>
</div>
<div class="row">
<div class="item">Cell 1</div>
<div class="item">Cell2</div>
</div>
<div class="row">
<div class="item">Cell 3</div>
<div class="item">Cell 4</div>
</div>
</div>
The problem is that, initially, .row is sized taking only the contents of .items into account. Then .items flex, and become equally wide due to flex: 1. But the contents weren't equally wide, so the longest will wrap to a second line.
It's better shown in this example:
.row {
display: inline-flex;
margin: 2px;
}
.item {
border: 1px solid;
}
.flex {
flex: 1;
}
<div class="row">
<div class="item">Cell 11111</div>
<div class="item">Cell 2</div>
(before flex)
</div>
<br />
<div class="row">
<div class="item flex">Cell 11111</div>
<div class="item flex">Cell 2</div>
(after flex)
</div>
In your example you have Cell 1 (with space) and Cell2 (without), which produces the difference.
Eventually the .row also flexes and thus a new line is no longer needed, but it seems browsers don't detect that. It's hard to say, but I think this is right. That's because
The hypothetical main size (height) of the rows is calculated, and
If a cross size is needed to determine the main size (e.g. when the
flex item’s main size is in its block axis) and the flex item’s cross
size is auto and not definite, in this calculation use fit-content as
the flex item’s cross size.
Rows flex. This determines their used height.
Cross sizes (widths) are determined. The rows are stretched to fill the table horizontally. But its too late, heights have already been calculated.
Since your column layout won't wrap because .table has an auto height, I would just use the default flex-wrap: nowrap. It fixes the problem because now the flex container will be single-line, and thus the widths of the rows will be definite:
If a single-line flex container has a definite cross size, the outer
cross size of any stretched flex items is the flex container’s inner
cross size (clamped to the flex item’s min and max cross size) and is
considered definite.
div.table {
flex-flow: column;
}
div.table {
display: flex;
flex-flow: column;
width: 70%;
margin: 15px auto;
border-bottom: 2px solid black;
}
div.row {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
div.head {
flex: 1;
text-align: center;
align-items: flex-start;
font-weight: bold;
border-width: 2px 0 1px;
border-style: solid;
}
div.item {
flex: 1;
text-align: center;
align-items: flex-start;
}
<div class="table">
<div class="row">
<div class="head">Col 1</div>
<div class="head">Col 2</div>
</div>
<div class="row">
<div class="item">Cell 1</div>
<div class="item">Cell2</div>
</div>
<div class="row">
<div class="item">Cell 3</div>
<div class="item">Cell 4</div>
</div>
</div>
You can also try explicitly providing an explicit width:
div.row {
width: 100%;
}
Or even preventing text wrapping with whitespace: nowrap.
Just change div.item from flex: 1; to only flex-grow:1;.
Here's the working snippet.
div.table {
display: flex;
width: 70%;
margin: 15px auto;
border-bottom: 2px solid black;
}
div.row {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
div.head {
flex: 1;
text-align: center;
align-items: flex-start;
font-weight: bold;
border-width: 2px 0 1px;
border-style: solid;
}
div.item {
flex-grow: 1;
text-align: center;
align-items: flex-start;
}
<div class="table">
<div class="row">
<div class="head">Col 1</div>
<div class="head">Col 2</div>
</div>
<div class="row">
<div class="item">Cell 1</div>
<div class="item">Cell2</div>
</div>
<div class="row">
<div class="item">Cell 3</div>
<div class="item">Cell 4</div>
</div>
</div>
I have a row where one column can vary in height so I don't know how high it will be. In order to properly space the adjacent column I have used nested flex boxes.
This works fine on main break point but as soon as I add the flex box then this breaks the responsiveness as the columns don't stack on mobile anymore.
What should I do here? Should I drop flexbox? How else can I achieve this spacing?
.container{
margin-top: 60px;
}
.container{
border: 1px solid #000;
}
.row{
display: flex;
}
.row-center{
display: flex;
flex: 1;
}
.outer{
display: flex;
flex-direction: column;
justify-content: space-around;
border: 1px solid #000;
width: 100%;
}
.one, .two, .three{
flex: 0 0 40px;
border: 1px solid #000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6"><img src="http://placehold.it/350x500"></div>
<div class="col-xs-12 col-sm-6 row-center">
<div class="outer">
<div class="one">some text</div>
<div class="two">some text</div>
<div class="three">some text</div>
</div>
</div>
</div>
</div>
jsfiddle mirror: https://jsfiddle.net/y68dnzwy/
May be this help you:
.container{
margin-top: 60px;
}
.container{
border: 1px solid #000;
}
.row{
display: flex;
}
.row-center{
display: flex;
flex: 1;
}
.outer{
display: flex;
flex-direction: column;
justify-content: space-around;
border: 1px solid #000;
width: 100%;
}
.one, .two, .three{
flex: 0 0 40px;
border: 1px solid #000;
}
/* Added: */
#media screen and (min-width:100px) and (max-width: 980px) {
.row-center {
flex: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6"><img src="http://placehold.it/350x500"></div>
<div class="col-xs-12 col-sm-6 row-center">
<div class="outer">
<div class="one">some text</div>
<div class="two">some text</div>
<div class="three">some text</div>
</div>
</div>
</div>
</div>
Demo
Used this with bootstrap 3, 4-text boxes in row with same height depending on the dynamic text, where on tablet and mobile are only 2 in row. And with tetx centered in middle
Somehow this flex magic makes on mobile, that only text boxes that are in same row have same height, so if last item is super tall, only last 2 items are super tall, not affecting first 2.
<div class="row row-flex-box">
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail flex-col-vertical-center">
<div class="caption"><span>text text text text</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail flex-col-vertical-center">
<div class="caption"><span>text text text text text text text text</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail flex-col-vertical-center">
<div class="caption"><span>text text text text</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail homepage-slider-bottom-block-single flex-col-vertical-center">
<div class="caption"><span>text text text texttext text text texttext text text text</span></div>
</div>
</div>
</div>
Css:
.row-flex-box {
display: flex; /* make cols same heigh */
flex-wrap: wrap; /* alows responsive behavior of cols (otherwise cols will never break on mobile)*/
}
.flex-col-vertical-center {
display: flex; /* specifing display/flex-direction/justifi-content only because i want to have text aligned in the middle of boxes much cleaner than display:table-cell way*/
flex-direction: column;
justify-content: center;
text-align:center;
height: 100%; /* since cols have bigger height this has effect, also can be ussefull - height: calc(100% - 15px); with 15px bottom margin */
}