I am trying create my own basic grid system with css flex. I want use classes for text and image alignment in flex item container.
I need help understanding the best way to do this.
This is currently what I have:
.flex-footer {
display: flex;
flex-flow: row wrap;
justify-content: center;
background-color:#330066;
}
.item {
height: 100px;
padding: 5px;
margin : 5px;
background: tomato;
}
.flex-footer > .item > div {
display: table;
}
.middle-center {
display: flex;
align-items: center;
justify-content: center;
}
.item > .bottom-center {
align-self: flex-end;
/*display : table-cell;*/
/*vertical-align: bottom;*/
/*flex-direction: column;*/
/*align-items: flex-end;*/
/*align-self: flex-end; */
/*align-content: flex-end;*/
/*justify-content: center;*/
}
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.col-4 {
width: 25%;
}
<div class="flex-footer">
<div class="item col-4 order-3">
<div class="top-left">text (top left) a</div>
<div class="middle-left">text (middle left)</div>
<div class="bottom left">text (bottom left)</div>
</div>
<div class="item col-4 order-1">
<div class="bottom-center">text (middle center)</div>
</div>
<div class="item col-4 order-2">
<div class="">text (top right)</div>
<div class="middle-center">image (middle center)</div>
<div>ul/litext </div>
</div>
</div>
My jsfiddle example is here:
https://jsfiddle.net/svwp24m6/
You need to add display: flex to all .items too.
Here is what I understood that you wanted to do, and some examples of how flex can do it.
The margin in .item is making the items become bigger than the width of .flex-footer. I rarely use margin in flex elements, because I need to take that into account (with calc()) when setting flex-basis. Margins are namely not accounted for in flex containers, sadly.
.flex-footer {
display: flex;
flex-flow: row wrap;
justify-content: center;
background-color:#330066;
}
.item {
display: flex;
justify-content: center;
align-content: center;
height: 100px;
padding: 5px;
margin : 5px;
box-sizing: border-box; /* to include padding in the element's width */
background: tomato;
}
.item.order-2 {
flex-direction: row-reverse;
}
.item.order-3 {
justify-content: left;
}
/*.flex-footer > .item > div {
display: table;
}*/
.top {
align-self: start;
}
.middle {
align-self: center;
}
.bottom {
align-self: end;
}
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.col-4 > div {
flex-basis: 25%;
/*width: 25%; */
}
<div class="flex-footer">
<div class="item col-4 order-3">
<div class="top left">text (top left) a</div>
<div class="middle left">text (middle left)</div>
<div class="bottom left">text (bottom left)</div>
</div>
<div class="item col-4 order-1">
<div class="middle center">text (middle center)</div>
</div>
<div class="item col-4 order-2">
<div class="top right">text (top right)</div>
<div class="middle center">image (middle center)</div>
<div>ul/litext </div>
</div>
</div>
Related
I'm having a situation where I'm having a page title on the left side and rating number and stars on the right side. I'm trying to align all items centered once flexbox wraps. Once "Longer Page Title" reaches rating and stars and flexbox wraps, they should all be center aligned.
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.title,
.ratings-and-stars {
border: 3px solid red;
}
.ratings-and-stars {
text-align: right;
}
<div class="flex-container">
<div class="title">Longer Page Title</div>
<div class="ratings-and-stars">
<div class="ratings">10</div>
<div class="stars">**********</div>
</div>
</div>
EDIT: I need to horizontally center content on mobile once flexbox wraps
The closest to your description i can think about is to play with margin & text-align and flex-grow for the title.
Below is an average demo.
However , you will need a mediaquerie set at a fixed breakpoint to decide when to wrap. See second snippet for a possible option
.flex-container {
display: flex;
flex-wrap: wrap;
}
.title {
flex: 1;
}
.title,
.ratings-and-stars {
border: 3px solid red;
margin: auto;
text-align:center;
text-align-last:left;
}
.ratings-and-stars {
text-align: right;
}
<div class="flex-container">
<div class="title">Longer Page Title ////////////////////long_string_for_demo\\\\\\\\\\\\\\\\\\\\\\\\ .</div>
<div class="ratings-and-stars">
<div class="ratings">10</div>
<div class="stars">**********</div>
</div>
</div>
Compromise with a mediaquerie (here set at 600px, use your own breakpoint)
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
text-align: center;
}
.title,
.ratings-and-stars {
border: 3px solid red;
}
.ratings-and-stars {
text-align: right;
}
#media (max-width:600px) {
.title {
min-width: 100%;
}
.flex-container {
justify-content: center;
}
}
<div class="flex-container">
<div class="title">Longer Page Title</div>
<div class="ratings-and-stars">
<div class="ratings">10</div>
<div class="stars">**********</div>
</div>
</div>
white-space is also a possibility for an average result:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content:center;
}
.title {
white-space:prewrap;
margin:auto auto auto 0;
}
.title,
.ratings-and-stars {
border: 3px solid red;
text-align:center;
}
.ratings-and-stars {
text-align: right;
}
<div class="flex-container">
<div class="title">Longer Page Title //////////////////// long_string_for_demo \\\\\\\\\\\\\\\\\\\\\\\\ .</div>
<div class="ratings-and-stars">
<div class="ratings">10</div>
<div class="stars">**********</div>
</div>
</div>
You are missing align-items: center more info
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center
}
.title,
.ratings-and-stars {
border: 3px solid red;
}
.ratings-and-stars {
text-align: right;
}
<div class="flex-container">
<div class="title">Longer Page Title</div>
<div class="ratings-and-stars">
<div class="ratings">10</div>
<div class="stars">**********</div>
</div>
</div>
I have a flex container that contains a varying number of other flex containers. I'm trying to get the outermost container to be justified to the right and only take up 60% of the available width. Then I want to have another flex container take up that space on the left. #Feed is the outermost container and the .tweets are its children. #friends is the independent flex container.
#feed {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 60%;
}
.tweet {
display: flex;
border: 2px solid red;
border-radius: 25px;
flex: 1;
flex-wrap: wrap;
}
#friends {
display: flex;
}
Here is an example of two flex items taking up 40% and 60% space.
#wrapper {
display: flex;
}
.column-40 {
width: 40%;
background: lightgray;
}
.column-60 {
width: 60%;
background: grey;
}
.tweet {
border: 1px solid blue;
}
<div id="wrapper">
<div class="column-40">
<div class="tweet">tweet</div>
<div class="tweet">tweet</div>
<div class="tweet">tweet</div>
</div>
<div class="column-60">
<div class="tweet">tweet</div>
<div class="tweet">tweet</div>
<div class="tweet">tweet</div>
</div>
</div>
When you just want the 60% wrapper to be aligned right you can remove the first column and justify the content to the end:
#wrapper {
display: flex;
justify-content: flex-end;
}
.column-60 {
width: 60%;
}
.tweet {
border: 1px solid blue;
}
<div id="wrapper">
<div class="column-60">
<div class="tweet">tweet</div>
<div class="tweet">tweet</div>
<div class="tweet">tweet</div>
</div>
</div>
I can't see why my flexboxes are not all obeying the same padding-bottom rule. Only one class is applying the height through padding-bottom.
.col-t {
width: 100%
}
.col-s {
width: 50%
}
main#container .grid .grid-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
main#container .grid .grid-container .box {
-webkit-flex: 1 auto;
flex: 1 auto;
position: relative;
}
main#container .grid .grid-container .box>div {
padding-bottom: 56.66666%;
}
.r {
background: red;
}
.b {
background: blue
}
.p {
background: purple
}
<main id="container">
<section class="grid">
<div class="col-s grid-container">
<div class="col-t box">
<div class="r">
</div>
</div>
<div class="col-s box">
<div class="b">
</div>
</div>
<div class="col-s box">
<div class="p">
</div>
</div>
</div>
</section>
</main>
Is it because the height through padding-top and bottom is relative to the width? But if this is the case, how would it be possible to make all of the boxes the same height using percentages?
Is it because the height through padding-top and bottom is relative to
the width?
Yes
But if this is the case, how would it be possible to make all of the
boxes the same height using percentages?
Since the col-s box element is only half the width of the col-t box, you need to double its childrens padding's percent, padding-bottom: calc(2 * 56.66666%); to make them have the same height as the col-t box's child has.
Stack snippet
.col-t {
width: 100%
}
.col-s {
width: 50%
}
main#container .grid .grid-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
main#container .grid .grid-container .box {
-webkit-flex: 1 auto;
flex: 1 auto;
position: relative;
}
main#container .grid .grid-container .box>div {
padding-bottom: 56.66666%;
}
main#container .grid .grid-container .col-s.box>div {
padding-bottom: calc(2 * 56.66666%); /* added */
}
.r {
background: red;
}
.b {
background: blue
}
.p {
background: purple
}
<main id="container">
<section class="grid">
<div class="col-s grid-container">
<div class="col-t box">
<div class="r">
</div>
</div>
<div class="col-s box">
<div class="b">
</div>
</div>
<div class="col-s box">
<div class="p">
</div>
</div>
</div>
</section>
</main>
left side Easy, is done.
but what about right section RESPONSIVE PUSHED right but align left, small box included.. see the image:
Any flexbox easy idea?
Try this:
.container {
display: flex;
justify-content: space-between;
}
.container > div {
display: flex;
flex-direction: column;
}
.right {
align-items: flex-start;
}
.left {
align-items: flex-end;
}
.box {
height: 40px;
width: 100px;
border: 1px solid blue;
margin-bottom: 5px;
}
.wide {
width: 200px;
}
<div class="container">
<div class="left">
<div class="box wide"></div>
<div class="box"></div>
</div>
<div class="right">
<div class="box wide"></div>
<div class="box"></div>
</div>
</div>
I've got the following markup:
.row {
display: flex;
align-items: stretch;
margin: -16px;
background: #ddd;
}
.row .col {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
margin: 16px;
background: #fff;
}
.header, .content, .footer {
padding: 16px;
background: red;
}
<div class="row">
<div class="col">
<div class="header">Header #1</div>
<div class="content">Lorem Ipsum<br />Dolor<br />Sit Amet</div>
<div class="footer">Footer</div>
</div>
<div class="col">
<div class="header">Header #2</div>
<div class="content">Lorem Ipsum<br />Dolor</div>
</div>
</div>
Unfortunatly the second header isn't align vertically to the top. Is there a way to archive this with flexbox? I need the ".header" to be aligned the the top and the ".content" to be centered within the rest of the box.
Greetings!
No, not really, not without another wrapper which is a flex-container.
As flexbox is, to a certain extent based on manipulting margins, there is no method (AFAIK, although I'd be interested to find out if there is) to justify-content: center and then align-self a child element to somewhere else other than center.
I'd go with something like this: Add a wrapper to the "content" div, give it flex:1 to fill the remaining space below the header, then make that wrapper display:flex with justify-content:center.
This seems to be the most logical method
.col {
height: 150px;
width: 80%;
margin: 1em auto;
border: 1px solid grey;
display: flex;
flex-direction: column;
}
.header {
background: lightblue;
}
.content {
background: orange;
}
.flexy {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
background: plum;
}
<div class="col">
<div class="header">Header #2</div>
<div class="flexy">
<div class="content">Lorem Ipsum
<br />Dolor</div>
</div>
</div>
Codepen Demo
Flexbox opens up all sorts of opportunities with margin: auto; this is one of them. Setting margin to auto along the flex axis (vertical in this case) will absorb any extra space before dividing it up between the flex items. Finally it's possible to vertically center stuff without creating a div soup.
.row {
display: flex;
align-items: stretch;
margin: -16px;
background: #ddd;
}
.row .col {
display: flex;
flex-direction: column;
flex: 1;
margin: 16px;
background: #fff;
}
.header, .content, .footer {
padding: 16px;
background: red;
}
.content {
margin-top: auto;
margin-bottom: auto;
}
<div class="row">
<div class="col">
<div class="header">Header #1</div>
<div class="content">Lorem Ipsum<br />Dolor<br />Sit Amet</div>
<div class="footer">Footer</div>
</div>
<div class="col">
<div class="header">Header #2</div>
<div class="content">Lorem Ipsum<br />Dolor</div>
</div>
</div>