I'm trying to display nested flexboxes in order to get an effect similar to cell merging in Excel. I got the nested cells to show up, but I can't get the margins displaying correctly: I want to have all the margins visible, not just between the main columns. Fiddle here --> http://jsfiddle.net/bedhvee4/1/
<div class="flex-container">
<div class="flex-item" style="-ms-flex: 4; flex: 4;">
<div class="flex-container">
<div class="flex-item" style="flex: 0 0 100%">Column A</div>
<div class="flex-item">11</div>
<div class="flex-item">12</div>
<div class="flex-item">13</div>
<div class="flex-item">14</div>
</div>
<div class="flex-container">
<div class="flex-item">21</div>
<div class="flex-item">22</div>
<div class="flex-item">23</div>
<div class="flex-item">24</div>
</div>
</div>
<div class="flex-item" style="-ms-flex: 3; flex: 3;">
<div class="flex-container">
<div class="flex-item" style="flex: 0 0 100%">Column B</div>
<div class="flex-item">16</div>
<div class="flex-item">17</div>
<div class="flex-item">18</div>
</div>
<div class="flex-container">
<div class="flex-item">26</div>
<div class="flex-item">27</div>
<div class="flex-item">28</div>
</div>
</div>
</div>
.flex-container {
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
justify-content: space-around;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
margin: 2px;
color: white;
font-weight: bold;
font-size: 2.5vw;
text-align: center;
flex: 1 0 0px;
white-space: nowrap;
overflow: hidden;
}
I am not really 100% sure what you are looking for but I did change a few colors and the order in which you have the divs nested and the margins seem to be working properly. Here is the jsfiddle
http://jsfiddle.net/bedhvee4/6/
.flex-container {
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
justify-content: space-around;
flex-wrap: wrap;
background: tomato;
}
.flex-item {
padding: 10px;
margin: 5px;
background: blue;
color: white;
font-weight: bold;
font-size: 2.5vw;
text-align: center;
flex: 1 0 0px;
white-space: nowrap;
overflow: hidden;
border: 1px solid white;
}
Related
By design flex is (initially) a single lane of content and wasn't made specifically for grids.
I currently use flex-wrap: wrap; but it's not really made for making grids -- even though it's probably the first option you try to make one.
Moreover I think it's not the only way to create grid-like layouts.
So is this the most accurate (proper) way? of creating a grid in flex?
Or are there better alternatives?
Edit (after 2 answers were posted): just to clarify, I'm not looking for display: grid; I'm asking what is the most proper/accurate way of doing it in flex. (See css flex grid)
(Of course display: grid is a proper way for making grids with CSS grid. That is not what the question is asking.)
My advise is to go with display: grid.
To get started you have to define a container element as a grid with
display: grid, set the column and row sizes with grid-template-columns
and grid-template-rows, and then place its child elements into the
grid with grid-column and grid-row.
This is an useful post about https://css-tricks.com/snippets/css/complete-guide-grid/
And this is a complete example:
The style:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 1px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
font-size: 30px;
text-align: center;
}
and the layout:
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
so i came up with this its not perfect but you could tweak it to make it what you want i think...https://codepen.io/colinthedev/pen/ExKwVVZ
document.getElementsByTagName("h1")[0].style.fontSize = "6vw";
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.mainWrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
.flexWrapOne {
display: flex;
flex-direction: row;
width: inherit;
margin: 0 .5rem 0 1rem;
justify-content: center;
align-items: center;
}
.item1 {
display: flex;
order: 1;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 15rem;
width: 20rem;
margin: .5rem;
background: #000;
}
.item2 {
display: flex;
order: 2;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 10rem;
width: 10rem;
margin: .5rem;
background: #0D89F2;
}
.item3 {
display: flex;
order: 3;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 15rem;
width: 33rem;
margin: .5rem;
background: #89F20D;
}
.flexWrapTwo {
display: flex;
flex-direction: column;
}
.item4 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 10rem;
width: 20rem;
margin: .5rem;
background: #000;
}
.item6 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 10rem;
width: 10rem;
margin: .5rem;
background: #0D89F2;
}
#media screen and (max-width: 1430px) {
.flexWrapTwo {
flex-direction: row;
}
.item4 {
order: 2;
}
.item6 {
order: 1;
}
}
#media screen and (max-width: 1250px) {
.mainWrapper {
display: flex;
flex-direction: column;
justify-content: center;
}
.flexWrapOne {
flex-direction: column;
width: inherit;
}
}
<h1>👋 Hello World!</h1>
<div class="flexWrapOne">
<h1 class="item1"> ITEM-1 </h1>
<h1 class="item2"> ITEM-2 </h1>
<h1 class="item3"> ITEM-3 </h1>
</div>
<div class="mainWrapper">
<div class="flexWrapOne">
<h1 class="item1"> ITEM-4 </h1>
<h1 class="item2"> ITEM-5 </h1>
<h1 class="item3"> ITEM-6 </h1>
</div>
<div class="flexWrapTwo">
<h1 class="item4"> ITEM-7 </h1>
<h1 class="item6"> ITEM-8 </h1>
</div>
</div>
<!-- Same as above just copy pasted -->
<div class="flexWrapOne">
<h1 class="item1"> ITEM-1 </h1>
<h1 class="item2"> ITEM-2 </h1>
<h1 class="item3"> ITEM-3 </h1>
</div>
<div class="mainWrapper">
<div class="flexWrapOne">
<h1 class="item1"> ITEM-4 </h1>
<h1 class="item2"> ITEM-5 </h1>
<h1 class="item3"> ITEM-6 </h1>
</div>
<div class="flexWrapTwo">
<h1 class="item4"> ITEM-7 </h1>
<h1 class="item6"> ITEM-8 </h1>
</div>
</div>
How to reduce the vertical spacing between text and make the text center aligned?
.item{
border: 1px solid;
display: flex;
align-items: center;
flex-wrap: wrap;
height: 200px;
margin: 4px;
float: left;
text-align: center;
width: 200px;
}
h3, h4{
margin: 0;
width: 100%;
}
<div class="item">
<h3>Title1</h3>
<h4>Title2</h4>
</div>
<div class="item">
<h3>Title1</h3>
<h4>Title2</h4>
</div>
<div class="item">
<h3>Title1</h3>
<h4>Title2</h4>
</div>
Remove flex-wrap: wrap; and add justify-content: center; flex-direction: column;
.item{
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 200px;
margin: 4px;
float: left;
text-align: center;
width: 200px;
}
h3, h4{
margin: 0;
width: 100%;
}
<div class="item">
<h3>Title1</h3>
<h4>Title2</h4>
</div>
<div class="item">
<h3>Title1</h3>
<h4>Title2</h4>
</div>
<div class="item">
<h3>Title1</h3>
<h4>Title2</h4>
</div>
I know I can easily achieve this kind of layout using the css float which is the current way I have the divs have the layout right now. But, I am trying to recode it and change it to flex alignment.
Here is my markup:
<div id="the-posts">
<div class="the-post-inner">
<a href="#">
<div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
<div class="content"><h2>Post 1</h2></div>
</a>
<a href="#">
<div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
<div class="content"><h2>Post 2</h2></div>
</a>
<a href="#">
<div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
<div class="content"><h2>Post 3</h2></div>
</a>
</div>
</div>
And here is my CSS:
.the-post-inner {
clear: both;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
}
.the-post-inner a {
margin-bottom: 4%;
}
.the-post-inner a .image {
padding-bottom: 60%;
}
.the-post-inner a .content {
padding: 20px;
}
.the-post-inner a .content h2 {
margin: 0;
}
.the-post-inner a:first-child {
flex: 0 0 60%;
margin-right: 4%;
}
.the-post-inner a:not(:first-child) {
margin-right: 0;
flex: 0 0 36%;
align-self: flex-start;
overflow: hidden;
float: left;
display: block;
}
I tried several codes based on the answers in other posts but I can't seem to make this work.
Thanks in advance for the suggestions.
EDIT:
I was wondering if there is a way to achieve this without changing the current markup which is not to separate the left post in another div and the right posts in another container.
https://jsfiddle.net/pextb1of/
I just put some fix. maybe will help you.
.the-post-inner {
clear: both;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
flex-direction: column;
height: 100px;
border: 1px solid #000;
}
a {
/*border: 1px solid #000;*/
margin-bottom: 4%;
/*padding: 20px;*/
}
.the-post-inner {
flex: 0 0 60%;
margin-right: 4%;
}
.sec-inner {
margin-right: 0;
flex: 0 0 36%;
align-self: flex-start;
flex-direction: column;
overflow: hidden;
float: left;
display: flex;
}
#the-posts{
display: flex;
flex-direction: row;
}
<div id="the-posts">
<div class="the-post-inner">
Post 1
</div>
<div class="sec-inner">
Post 2
Post 3
</div>
</div>
Align in the center when the div is displayed flexbox doesn't work in IE11. It is ok in Chrome/Firefox;
.wrapper {
align-items: center;
-ms-flex-align: center;
-ms-flexbox; display
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
height: 8.125rem;
border: 1px solid blue;
}
.header {
align-items: flex-start;
-ms-flex-align: start;
-ms-flexbox; display
display: flex;
margin: 0.5rem auto 0 auto;
border: 1px solid red;
}
.container {
flex-grow: 1;
flex-direction: row;
-ms-flex-align: center;
-ms-flex-direction: row;
max-width: 38.25rem;
}
.bimage {
margin: 0 1.5rem 0 0;
}
.nav {
-ms-flexbox; display
display: flex;
flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-grow: 1;
-ms-flex-positive: 1;
}
.navbar {
align-items: flex-start;
-ms-flex-align: start;
color: #fff;
display: flex;
justify-content: space-between;
-ms-flex-pack: justify;
text-transform: uppercase;
}
.navbar items > * {
color: inherit;
margin-right: 0.5rem;
}
.navbar items> *:last-child {
margin-right: 0;
}
.search {
-ms-flexbox; display
display: flex;
align-items: flex-start;
-ms-flex-align: start;
margin: 1.5rem 0 1.5rem 0;
}
<div class="wrapper">
<div class="header container">
<div class="bimage">
<img src="https://via.placeholder.com/50">
</div>
<div class="nav">
<div class="navbar">
<div class="items">
Alpha
Beta
Gama
Teta
</div>
<div class="items">
Right Alpha
Right Beta
</div>
</div>
<div class="search">
<form>
<input class="searchinput" placeholder="Search" name="q" >
<button type="submit" value="Search">
</form>
</div>
</div>
</div>
I made some changes in CSS file. Please check the answer,
.wrapper {
align-items: center;
text-align: center;
-ms-flex: display;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
height: 8.125rem;
border: 1px solid blue;
}
.header {
align-items: flex-start;
text-align: start;
-ms-flex: display;
display: flex;
margin: 0.5rem auto 0 auto;
border: 1px solid red;
}
.container {
flex-grow: 1;
flex-direction: row;
text-align: center;
-ms-flex-direction: row;
max-width: 38.25rem;
}
.bimage {
margin: 0 1.5rem 0 0;
}
.nav {
-ms-flex: display;
display: flex;
flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-grow: 1;
}
.navbar {
align-items: flex-start;
text-align: start;
color: #fff;
display: flex;
justify-content: space-between;
text-transform: uppercase;
}
.navbar items>* {
color: inherit;
margin-right: 0.5rem;
}
.navbar items>*:last-child {
margin-right: 0;
}
.search {
-ms-flex: display;
display: flex;
align-items: flex-start;
text-align: start;
margin: 1.5rem 0 1.5rem 0;
}
<div class="wrapper">
<div class="header container">
<div class="bimage">
<img src="https://via.placeholder.com/50">
</div>
<div class="nav">
<div class="navbar">
<div class="items">
Alpha
Beta
Gama
Teta
</div>
<div class="items">
Right Alpha
Right Beta
</div>
</div>
<div class="search">
<form>
<input class="searchinput" placeholder="Search" name="q">
<button type="submit" value="Search">
</form>
</div>
</div>
</div>
I have a flexbox parent setted with flex-direction: row.
Inside this parent, I have two children. I would like them to have the same height!
Inside this children I have dynamic content (with variable height).
The way I'm doing, if I add text on the right child, the left one will grow.
But If the left child grows, the right one stays small.
Should not they behave in the same way?
Here is a fiddle: https://jsfiddle.net/4g6uevok/8/
HTML:
<div id="main">
<div class="left">
<div class="title">MY TITLE:</div>
<div class="left-area">
<div class="left-area-row">
<div class="left-area-row-titulo">#1</div>
<div class="left-area-row-info">A</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">#2</div>
<div class="left-area-row-info">B</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">#3</div>
<div class="left-area-row-info">AC</div>
</div>
</div>
</div>
<div class="right">
<div class="title">SECOND TITLE:</div>
</div>
</div>
CSS:
#main {
width: 100%;
height:auto;
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
background-color: red;
}
.left{
width: 400px;
display: flex;
flex-direction: column;
background:lime;
align-items: stretch;
}
.title {
width: 100%;
font-size: 1.5em;
color:#525252;
display: flex;
justify-content: center;
margin-bottom: 20px;
font-weight: bold;
font-family: "emir-bold";
}
.left-area {
width: 100%;
display: flex;
flex-direction: column;
}
.left-area-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-area-row-titulo {
width: 49.5%;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #819196;
color: white;
padding: 6px;
margin:0 2px 4px 0;
}
.left-area-row-info {
width: 49.5%;
display: flex;
align-items: center;
justify-content: center;
background: #CCCCCC;
padding: 6px;
margin:0 0 4px 2px;
}
.right {
width: calc(100% - 430px);
height: 100%;
display: flex;
flex-direction: column;
background:orange;
align-items: stretch;
}
Flex items are aligned to strech by default. Your height:100% value in .right class preventing it to take whole height so try to remove height:100% to the .right element
#main {
width: 100%;
height: auto;
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
background-color: red;
}
.left {
width: 400px;
display: flex;
flex-direction: column;
background: lime;
align-items: stretch;
}
.title {
width: 100%;
font-size: 1.5em;
color: #525252;
display: flex;
justify-content: center;
margin-bottom: 20px;
font-weight: bold;
font-family: "emir-bold";
}
.left-area {
width: 100%;
display: flex;
flex-direction: column;
}
.left-area-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-area-row-titulo {
width: 49.5%;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #819196;
color: white;
padding: 6px;
margin: 0 2px 4px 0;
}
.left-area-row-info {
width: 49.5%;
display: flex;
align-items: center;
justify-content: center;
background: #CCCCCC;
padding: 6px;
margin: 0 0 4px 2px;
}
.right {
width: calc(100% - 430px);
display: flex;
flex-direction: column;
background: orange;
align-items: stretch;
}
<div id="main">
<div class="left">
<div class="title">MY TITLE:</div>
<div class="left-area">
<div class="left-area-row">
<div class="left-area-row-titulo">
#1
</div>
<div class="left-area-row-info">A</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#2
</div>
<div class="left-area-row-info">BA</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#3
</div>
<div class="left-area-row-info">C</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#4
</div>
<div class="left-area-row-info">D</div>
</div>
</div>
</div>
<div class="right">
<div class="title">SECOND TITLE:</div>
</div>
</div>