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>
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>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I need help laying out my html with css flexbox (I hope this is doable with flexbox).
I have a Container with a variable amount of images. Image can be either landscape or portrait orientation. If image is landscape (Image 1) - it will occupy one 'row'. If image is portrait - there are two cases:
If there is one portrait image in a 'row' (either it's the last image, or the next one is landscape) - then Image 2 should be centered on the 'row'.
If there are two successive portrait images - I'd like them to both fit into one 'row'
Pls note, that the 'rows' are an abstract notion here. I don't want to use css grid (unless there are absolutely no other options).
Using a flexbox in combination with the justify-content: center; and flex-wrap: wrap; should achieve the exact effect you are looking for.
Please see the two code snippets below for the two examples. I have used multiple coloured div with a width and height to simulate the horizontal and vertical image types you referred to.
.flex {
display: flex;
flex-wrap: wrap;
width: 100px;
border: 2px black solid;
padding: 1em;
justify-content: center;
}
.horizontal {
background: yellow;
width: 100px;
height: 50px;
margin-bottom: 1em;
}
.vertical {
background: green;
width: 50px;
height: 100px;
}
<div class="flex">
<div class="horizontal">Image 1</div>
<div class="vertical">Image 2</div>
</div>
.flex {
display: flex;
flex-wrap: wrap;
width: 100px;
border: 2px black solid;
padding: 1em;
justify-content: center;
}
.horizontal {
background: yellow;
width: 100px;
height: 50px;
margin-bottom: 1em;
}
.vertical {
background: green;
width: 50px;
height: 100px;
}
#blue {
background: blue;
}
<div class="flex">
<div class="horizontal">Image 1</div>
<div class="vertical">Image 2</div>
<div class="vertical" id="blue">Image 3</div>
</div>
This can be done with align-items: center and flex-wrap:wrap:
.flex{
width: 220px;
display:flex;
align-items: center;
flex-wrap:wrap;
}
.flex img{
border: solid 4px #efefef;
box-sizing:border-box;
margin: 0 auto;
}
<h3>Example 1</h3>
<div class="flex">
<img src="https://placekitten.com/220/60">
<img src="https://placekitten.com/110/120">
</div>
<h3>Example 2</h3>
<div class="flex">
<img src="https://placekitten.com/220/60">
<img src="https://placekitten.com/100/120">
<img src="https://placekitten.com/100/120">
</div>
You can easily achieve this using the same grid system as Bootstrap using class like container, row, col:
.container {
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
.align-center {
align-items: center;
justify-content: center;
}
.image1 {
width: 500px;
height: 300px;
background-color: red;
}
.image2,
.image3 {
width: 250px;
height: 500px;
}
.image2 {
background-color: yellow;
}
.image3 {
background-color: blue;
}
.image1,
.image2,
.image3 {
border: solid #000 2px;
}
<div class="container align-center">
<div class="row">
<div class="col image1">
<h1>image1</h1>
</div>
</div>
<div class="row align-center">
<div class="col image2">
<h1>image2</h1>
</div>
</div>
</div>
<div class="container align-center">
<div class="row">
<div class="col image1">
<h1>image1</h1>
</div>
</div>
<div class="row align-center">
<div class="col image2">
<h1>image2</h1>
</div>
<div class="col image3">
<h1>image3</h1>
</div>
</div>
</div>
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>
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>