I am trying to make code from further down in the html show above code from above it by using CSS.
Basically my html is like this:
<div class="showbelow">
show below
</div>
<div class="showabove">
show above
</div>
I am wanting the showabove div to show above the showbelow div despite being below it in the html. Is there a way of doing this without using negative margins in the css? eg. giving showabove a negative top margin and show below a positive top margin? Both divs are 100% of the container.
Thanks in advance :)
There is a property order to place items on a specific place using flexbox.
See the following example:
.container {
display:flex;
flex-direction:column;
}
.container div {
border:1px solid red;
}
.showabove {
order:1;
}
.showbelow {
order:2;
}
<div class="container">
<div class="showbelow">show below</div>
<div class="showabove">show above</div>
</div>
Flex items are, by default, displayed and laid out in the same order as they appear in the source document. The order property can be used to change this ordering.
https://drafts.csswg.org/css-flexbox-1/#order-property
Be careful with using order:-1!
.container {
display:flex;
flex-direction:column;
}
.container div {
border:1px solid red;
}
.showabove {
order:-1;
}
<div class="container">
<div class="showbelow">show below</div>
<div class="showmiddle">show middle</div>
<div class="showabove">show above</div>
</div>
Explanation: The order:-1 set the item on the first position of your container, because all the other items has per default order:0. It doesn't move the item before the previous item! In your case this solution is working but if you add more items it can be a problem and you have to set the order for each item on the container like the example above.
With Flexbox you can change order of elements. So in this case you can use order: -1 on .showabove div.
body {
display: flex;
flex-direction: column;
}
.showabove {
order: -1;
}
<div class="showbelow">show below</div>
<div class="showabove">show above</div>
Related
Here is my code:
<div class="flex-container fb-jc-center fb-ai-center">
<div>
first div
</div>
<div>
second div
</div>
</div>
.flex-container{
display:flex;
}
.fb-jc-center{
justify-content:center;
}
.fb-ai-center {
align-items: center;
}
Example here: https://jsfiddle.net/0w1sk2au/
As you can see my two div are perfectly centered but I would like to shift the one on the right without moving the one on the left.
I tried:
.flex-container > div:nth-child(2){
margin-left: 20px;
}
but it doesn't work because it moves the first div too.
I think I can add an empty element with a 20 px width:
<div class="flex-container fb-jc-center fb-ai-center">
<div>
first div
</div>
<div class="flex-container">
<div id="empty"></div>
<div>second div</div>
</div>
</div>
#empty{
width:20px;
}
Is there a simpler way to do it ?
To shift #red to the right without losing location for #blue, set rule margin-left for selector .flex-container > div.
The secret of this solution is to apply this css rule for both div, which means that the left margin of the #blue div is compensated.
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:
Make flex items take content width, not width of parent container
(3 answers)
Closed 5 years ago.
See attached snippet.
I need each item to take width space, with respect to content.
flex-items need to be stacked vertically, like in the example.
how to achieve it?
how to do that?
.container {
display:flex;
flex-direction:column;
}
.green {
background-color:green;
}
.red {
background-color:red;
}
<div class="container">
<div class="green"> hello world</div>
<div class="red"> hello world2</div>
</div>
Assuming they still should stack vertically, use display: inline-flex and they will size equally by the content of the widest item.
For each row to collapse to their individual content, use i.e. align-items: flex-start, and note, this will make them collapse when using display: flex too.
Why they stretch to equal width, is because align-items defaults to stretch, so by using any other value they will size by content
.container {
display: inline-flex;
flex-direction:column;
align-items: flex-start;
}
.green {
background-color:green;
}
.red {
background-color:red;
}
<div class="container">
<div class="green"> hello world</div>
<div class="red"> hello world2</div>
</div>
I have some DIVs on a page. How can I make the DIVs create a new column on the right when the bottom of the page is reached. So I have some small fixed height DIVs with images inside them. After every DIV, there is a line and then the next div and so on. On smaller displays, the screen requires scrolling to see the DIVs. So I added overflow: hidden to the body, to disable the scrolling. Now the DIVs at the very bottom are cut out, so I want the DIVs that are cut out, to create a new column to the right.
Example: .
body {
overflow: hidden;}
#icon {
background: #000;
color:#fff;
height:50px;
width:50px;
}
<body>
<div id=icon>1</div><br>
<div id=icon>2</div><br>
<div id=icon>3</div><br>
<div id=icon>4</div><br>
<div id=icon>5</div><br>
<div id=icon>6</div><br>
<div id=icon>7</div><br>
<div id=icon>8</div><br>
<div id=icon>9</div>
There's a lot of solutions to this and all run into polyfill issues. Columns are notorious for this.
A good option with decent coverage is to use flexboxes. Flexboxes were pretty much made for this kind of stuff.
Wrap all the divs in another div (i used section) and give the wrapping container some flexbox rules:
body {
overflow: hidden;}
.wrap {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh; /*the height will need to be customized*/
width: 50px;
}
#icon {
background: #000;
color:#fff;
height:50px;
width:50px;
margin-left: 10px;
}
<section class="wrap">
<div id=icon>1</div><br>
<div id=icon>2</div><br>
<div id=icon>3</div><br>
<div id=icon>4</div><br>
<div id=icon>5</div><br>
<div id=icon>6</div><br>
<div id=icon>7</div><br>
<div id=icon>8</div><br>
<div id=icon>9</div>
</section>
You'll need to give height and width rules to the wrapper, however. If it's in another container with a set height, you should be able to give it height: 100% and it will reach the bottom of the page.
Word of warning: columns and flexboxes are notorious for having cross-browser compatability issues, though mobile browsers are somewhat better at this. A good solution is to use a library with a focus on responsive or mobile design, like Bootstrap or SpaceBase (though the latter is a SASS library)
#samuel-denty are you looking for CSS Columns ?
here is jsfiddle: https://jsfiddle.net/zk7578vj/
try using class (.) icon instead of id (#) on css, like this:
body {
overflow: hidden;
-webkit-columns: 50px 2;
-moz-columns: 50px 2;
columns: 50px 2;
}
.icon {
background: #000;
color:#fff;
height:50px;
width:50px;
}
<body>
<div class="icon">1</div><br>
<div class="icon">2</div><br>
<div class="icon">3</div><br>
<div class="icon">4</div><br>
<div class="icon">5</div><br>
<div class="icon">6</div><br>
<div class="icon">7</div><br>
<div class="icon">8</div><br>
<div class="icon">9</div>
</body>
I have a div called text, and next to it I want a button which should take up the remaining width of the screen so I set the width of the button to 100%, but it takes that as 100% of the screen and appears below the text div. How can I make it so the button is 100% the width of its parent div and not the whole screen so it all appears on the same line, without setting a width for the text div? Here is a demo. Thank you.
css
#text{
float:left;
}
div{
border:1px solid red;
}
button{
width:100%;
}
html
<div id = "text">text</div>
<div>
<button>button</button>
</div>
You should be able to achieve this using display: table-cell css:
Try something like this: DEMO
<div class="container">
<div class="cell" id="text">text</div>
<div class="cell">
<button>button</button>
</div>
</div>
div.container {
width: 100%;
display: table;
}
div.cell {
border:1px solid red;
display: table-cell;
}
button {
width:100%;
}
/* use this style to set width of the #text cell to exactly the width of it's cotnents */
#text {
width:1%;
white-space: nowrap;
}
You can place them in a div together and display them as flex.
http://jsfiddle.net/1amvwzuw/2/
<div class="flex">
<div id="text">text</div>
<button>button</button>
</div>
You need to give your parent container a width. So text could be like, 80% then the div that contains button could be 20%. then button will be 100% of the parent div and both divs will be beside each other.
So div element is a block element. That means it will start on a new line and the next element after it will be on a new line as well. What you can do here is to set display: inline-block to both divs you have.
If you don't need a block element just use an inline one like span
http://jsfiddle.net/1amvwzuw/3/
If your browser-matrix allows it this is the perfekt opportunity to try out flexbox:
html
<div class="wrapper">
<div id="text">text</div>
<div class="button-wrapper"><button>button</button></div>
</div>
css
.wrapper{
display: flex;
}
.button-wrapper{
flex: 1;
}
button {
width: 100%;
}
http://jsfiddle.net/1amvwzuw/5/
if not look at this question to see how to stretch a div using display:table-cell:
Auto-stretching table-cell div css