This question already has answers here:
html/css responsive 3-column layout - stack right column below left column
(2 answers)
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 5 years ago.
I have a grid system that uses flexbox. At present I'm trying to work out if I can make it work with the following scenario.
<div class="flex-outer">
<div class="flex-inner span-all red-box">
<h2>Title</h2>
</div>
<div class="flex-inner span-1of2 green-box">
<div>Some text</div>
</div>
<div class="flex-inner span-1of2 blue-box">
<p>A table perhaps</p>
</div>
</div>
.flex-outer {
display:flex;
flex-wrap:wrap;
}
.span-all {
width:100%;
}
.span-1of2 {
width:50%;
}
.red-box {
background-color:Red;
}
.green-box {
background-color:Green;
}
.blue-box {
background-color:blue;
}
The html above could be used to create the following layout:
However on a certain breakpoint, I'd be looking to change the layout to something like this:
I can change the order of the green and blue boxes to suit, but on wrapping, the second box is position below the blue box. This is the behaviour I expected.
So, are there any flexbox tricks I can use to tuck the green box immediate beneath the red one?
Related
This question already has answers here:
Can media queries resize based on a div element instead of the screen?
(11 answers)
Closed 3 years ago.
I have a certain scenario like follows:
You have three inline-elements, two are the same essentially, but the one in the middle is not and its width will always be unknown.
You want either two things:
All three elements are inline on the same row
If the width is two
small, all three elements are stacked on top of each other
With display: inline-element, it will collapse as needed, meaning at a certain width two elements will be on top while one is on bottom. This isn't any of the desired conditions.
.div-a {
background-color: red;
}
.div-b {
background-color: blue;
}
div {
display: inline-block;
font-size: 4em;
}
<div class="div-a">
L
</div>
<div class="div-b">
Mid
</div>
<div class="div-a">
R
</div>
How can we make sure that either all blocks are stacked, or they are all inline? Remember the middle element will always be unknown width.
EDIT: Don't know why this was marked as duplicate, as I didn't even ask about media query resizing, that's just one of the solutions.
it depends on your viewport and elements width. as you put display inline element in div all div will be treated as an inline element. until you apply any new display property in any specific div. to make sure it comes to stacked, you can use display flax property.
Please read this article. Hope it will help you.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
use display flex to stay in one row and manage dynamically width middle element
<div class="a">
<div class="div-a">
L
</div>
<div class="div-b">
Midghghghghchcghgdc
</div>
<div class="div-a">
R
</div>
</div>
css
.a {
display:flex;
}
.div-a {
background-color: red;
}
.div-b {
background-color: blue;
}
div {
display: inline-block;
font-size: 2em;
}
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 4 years ago.
This is my problem:
I have different DIVs with all the same widths but different heights.
On a large viewport these DIVs should be arranged as a grid with two columns.
The margin between the DIVs should be equal (vertically and horizontally).
Since the DIVs should be displayed in one column with the correct order on mobile it is not possible to have its own parent elements for each column.
Here is an image of what I want to achieve:
Is there any way to solve this with pure html/css?
The only solution I found so far is to use some kind of masonry javascript. But I feel like there must be a better solution...
What I've tried so far:
Using float/inline-block: I get perfect rows but 4 always starts at the same height as 3. So the margins are not equal. (See: https://codepen.io/OsmaGiliath/pen/vaPqro)
// EXAMPLE I
.parent {
width:230px;
}
.children {
display:inline-block;
width:100px;
}
Flexbox: Same (See: https://codepen.io/OsmaGiliath/pen/ajMgjR)
// EXAMPLE II
.parent {
display:flex;
flex-wrap: wrap;
}
.children {
flex:none;
}
Vertical flexbox: Works – but only with a fixed height on the parent element which is not possible in my example since this would limit the elements in the growth (See: https://codepen.io/OsmaGiliath/pen/ZjPdVx)
// EXAMPLE III
.parent {
display:flex;
flex-wrap: wrap;
flex-direction:column;
}
.children {
flex:none;
}
You can add columns that will warp up in one column if there is no enough width. This will allow you to display it as one column on mobiles. See working example here: https://codepen.io/anon/pen/BPEaXQ . You can see it working by changing the width of parent "grid" element to simulate mobiles.
<div class="grid">
<div class="column">
<div class="element higher">1</div>
<div class="element">2</div>
</div>
<div class="column">
<div class="element">3</div>
<div class="element">4</div>
</div>
</div>
.grid {
display:flex;
flex-wrap:wrap;
flex-direction:row;
margin:0 auto;
width:230px;
border:1px solid blue;
}
.column {
display: flex;
flex-direction: column;
}
.element {
width:100px;
height:140px;
margin:5px;
background: red;
}
.higher {
height:160px;
}
I finally found a solution thanks to the comment by #tobias-k.
For Desktop:
Using columnt-count: 2 on the parent element
Change the order of the 2nd and 3rd element
For Mobile:
Position the elements in a column using flexbox
Use flexbox's order to swap back the 2nd and 3rd element
https://codepen.io/OsmaGiliath/pen/vaMYPY
Thank you for all the quick responses!
This question already has answers here:
Why can't <fieldset> be flex containers?
(7 answers)
Flex / Grid layouts not working on button or fieldset elements
(3 answers)
Closed 5 years ago.
I have a form whose fields should fall on two columns. I decided to try and use flex boxes to achieve the effect.
HTML :
<form class="hbspt-form">
<fieldset class="form-columns-2">
<div class="hs_firstname field hs-form-field">...</div>
<div class="hs_lastname field hs-form-field">...</div>
</fieldset>
</form>
CSS :
form {
display:flex;
max-width: 100%;
width:100%;
}
form fieldset {
display:flex;
flex-flow:row nowrap;
justify-content:space-between;
max-width: 100%;
min-width:0;
}
form fieldset .field.hs-form-field {
clear:none;
display:flex;
flex-direction:column;
float:left;
min-width:0;
width:45%;
}
form fieldset.form-columns-2 .field.hs-form-field {
flex-basis:calc(50% - 1rem);
}
And here's what it gives. The div.field's refuse to display as columns, they stubbornly each fall on their separate lines. When I hover the element in DevTools, it looks like an artificial margin-right is created to fill the row, forcing the next div on another line.
This only happens on Chrome (I have version 60.0). On Firefox and Edge, it goes on two columns as expected.
Thanks for your input !
This question already has answers here:
Three-column variable width CSS page layout, centre column expands
(2 answers)
Closed 8 years ago.
I'm stuck with a problem. How to make full screen layout, where left and right columns are fixed width (for example 250px), but middle column is fluid. My page must be always be full screen!
I want something like this:
You can achieve this using a bit simple logic of CSS.
You have to create 3 different styles which can take care of Left content, middle content and right content. Here you go :
#fixed_width {
width:96px;
padding:2px;
border:1px solid #000;
float:left;
background-color:#f00;
}
#fixed_width_right {
width:96px;
padding:2px;
border:1px solid #000;
float:right;
background-color:#f00;
}
#unfixed_width {
padding:2px;
margin-left:105px;
border:1px solid #000;
background-color:#090;
}
Use this CSS styles in your HTML code like below :
<div id="container">
<div id="fixed_width">col 1, 80 pixels </div>
<div id="fixed_width_right">col 3, 80 pixels </div>``
<div id="unfixed_width">col 2, wild card </div>
</div>
And you are done :)
Cheers..!!
This question already has answers here:
How to use vertical align in bootstrap
(8 answers)
Closed 8 years ago.
I have a very simple problem on vertical middle a span using Bootstrap 2.3.2.
Requirements:
There are two columns, left column has a fixed height 300px because there is 300x300 image inside.
Right column has text and must be centered based on left column.
The whole thing must be responsive. That's why I am using responsive image.
If the second column goes down to bottom, its height must fit the size of text. That means I cannot set fixed height on the second column.
Must not use JS to solve this.
HTML:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<img class="img-responsive" src="http://placehold.it/300x300"/>
</div>
<div class="span6 v-center">
<div class="content">
<h1>Title</h1>
<p>Paragraph</p>
</div>
</div>
</div>
</div>
CSS:
.v-center {
display:table;
border:2px solid gray;
height:300px;
}
.content {
display:table-cell;
vertical-align:middle;
text-align:center;
}
My code: http://jsfiddle.net/qhoc/F9ewn/1/
You can see what I did above: I basically set the second column span as table and middle the .content table-cell. I copied that method here How to use vertical align in bootstrap (with working example here http://jsfiddle.net/lharby/AJAhR/)
My challenge is a bit different due to requirements above. Any idea on how to make it work? Thanks.
Add !important rule to display: table of your .v-center class.
.v-center {
display:table !important;
border:2px solid gray;
height:300px;
}
Your display property is being overridden by bootstrap to display: block.
Example
.row {
letter-spacing: -.31em;
word-spacing: -.43em;
}
.col-md-4 {
float: none;
display: inline-block;
vertical-align: middle;
}
Note: .col-md-4 could be any grid column, its just an example here.