This question already has answers here:
Align div element to bottom of container [duplicate]
(1 answer)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How does flex-wrap work with align-self, align-items and align-content?
(2 answers)
Closed 5 years ago.
As you can see here: JSFiddle
I want author div to be at the bottom of his parent container. I tried with align-self: flex-end; but it's not working. What am I doing wrong?
.flexbox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
display: flex;
flex-direction: column;
width: 100px;
border: 1px solid #000;
padding: 10px;
}
.item .author {
width: 100%;
align-self: flex-end;
border: 1px solid #000;
}
<div class="flexbox">
<div class="item">
<div class="title">
Title
</div>
<div class="content">
Content
</div>
<div class="author">
Author
</div>
</div>
<div class="item">
<div class="title">
Title
</div>
<div class="content">
Content<br>Content
</div>
<div class="author">
Author
</div>
</div>
<div class="item">
<div class="title">
Title
</div>
<div class="content">
Content<br>Content<br>Content
</div>
<div class="author">
Author
</div>
</div>
</div>
Try add to .author
margin-top: auto;
You also need to remove flex-end.
You can make a wrapper div around the divs which have to float from flex start. And the author outside the wrapper and give to .item justify-content: space-between;.
https://jsfiddle.net/0zq5a5xu/2/
.flexbox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100px;
border: 1px solid #000;
padding: 10px;
}
.wrapper {
display: flex;
flex-direction: column;
}
.author {
width: 100%;
border: 1px solid #000;
}
<div class="flexbox">
<div class="item">
<div class="wrapper">
<div class="title">
Title
</div>
<div class="content">
Content
</div>
</div>
<div class="author">
Author
</div>
</div>
<div class="item">
<div class="wrapper">
<div class="title">
Title
</div>
<div class="content">
Content<br>Content
</div>
</div>
<div class="author">
Author
</div>
</div>
<div class="item">
<div class="wrapper">
<div class="title">
Title
</div>
<div class="content">
Content<br>Content<br>Content
</div>
</div>
<div class="author">
Author
</div>
</div>
</div>
Hope this helps.
Related
what i want to make is picture below
and i made it to this far, using stackflow.
but i could't understand about positioning boxes
even though found some infos.
what should i do next?
<!-- html -->
<div class="boxbox">
<div class="box1">
<img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
</div>
<div class="box2">
<img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
</div>
<div class="box3">
<img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
</div>
</div>
<!-- css -->
.boxbox{
display: flex;
align-items: start;
justify-content: space-between;
}
This is one of simple approach for fix your layout.
.boxbox{
display: flex;
align-items: start;
justify-content: space-between;
}
img{
width:300px;
height:300px;
}
.box1,.box2{
width:50%
}
.box3{
width:50%;
margin:auto;
}
<div class="boxbox">
<div class="box1">
<img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
</div>
<div class="box2">
<img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
</div>
</div>
<div class="boxbox">
<div class="box3">
<img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
</div>
</div>
Or using flex
.boxbox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box1,
.box2,
.box3 {
flex-basis: 50%;
min-height: 100px;
}
img {
width: 300px;
height: 300px;
}
.box3 {
margin: auto;
}
I have simple flex rows which I'm trying to line them on one line but for some reason it doesn't work. They are one under another.
I have created demo here:
https://jsfiddle.net/L2xor1jf/1/
.page-content {
max-width: 1366px;
width: 100%;
margin-left: auto;
margin-right: 10%;
padding-top: 50px;
}
section {
display: block;
}
.flex-container{
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-container>div {
flex-basis:30%;
margin:5px;
}
<section class="page-content">
<div id="site-main">
<div class="flex-container">
<div class="container box">
<div class="item">
<p class="headline font--h5 accent--teal">Title title</p>
<div class="fullwidth">
</div>
<div class="font--h5 body body--dark">
Some text
</div>
</div>
<p class="read-more">Read More</p>
</div>
</div>
</div>
</section>
Looks like you forgot display: flex.
.flex-container{
display: flex;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
Edit: An explanation... You need the display property to define the container as a flexbox and that is what tells the children of that element that they should use a flex context.
Your flex container is missing the flex style
.page-content {
max-width: 1366px;
width: 100%;
margin-left: auto;
margin-right: 10%;
padding-top: 50px;
}
section {
display: block;
}
.flex-container{
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display:flex;
}
.flex-container>div {
flex-basis:30%;
margin:5px;
}
<section class="page-content">
<div id="site-main">
<div class="flex-container">
<div class="container box">
<div class="item">
<p class="headline font--h5 accent--teal">Title title</p>
<div class="fullwidth">
</div>
<div class="font--h5 body body--dark">
Some text
</div>
</div>
<p class="read-more">Read More</p>
</div>
<div class="container box">
<div class="item">
<p class="headline font--h5 accent--teal">Title title</p>
<div class="fullwidth">
</div>
<div class="font--h5 body body--dark">
Some text
</div>
</div>
<p class="read-more">Read More</p>
</div>
<div class="container box">
<div class="item">
<p class="headline font--h5 accent--teal">Title title</p>
<div class="fullwidth">
</div>
<div class="font--h5 body body--dark">
Some text
</div>
</div>
<p class="read-more">Read More</p>
</div>
</div>
</div>
</section>
I am trying to create "shopping items" embedded in a div that have a certain fixed width and height. I know that you can do display: inline !important; to keep the div's on one line.
However, how can I make it such that it breaks when the window size becomes smaller, preferably when the outer div is smaller?
Here is an illustration:
Here is what I tried:
<div class="row">
<div class="col-sm-12">
<div class="items">
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
</div>
</div>
</div>
and css:
.items {
display: flex !important;
flex-wrap: wrap !important;
-webkit-flex-wrap: wrap !important;
-moz-flex-wrap: wrap !important;
-o-flex-wrap: wrap !important;
-ms-flex-wrap: wrap !important;
}
.item {
width: 200px !important;
height: 500px !important;
margin: 10px !important;
text-align: center !important;
}
With flex you can also set a breaking point (without mediaquerie) when boxes reaches 200px of width and also span them on the whole line:
(bootstrap included in snippet , i do not really see troubles there)
.row {
text-align: center;
}
.items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.item {
/* with a breaking point at 200px width */
min-width: 200px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
/* or without min-width nor flex, just:
width:200px; it will wrap everytime needed and boxes will keep a static width */
height: 150px;/* none or whatever*/
margin: 10px 30px;/* whatever*/
text-align: center;
border: solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-12">
<div class="items">
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
</div>
</div>
</div>
So easy like that;
float: left;
You can use CSS Flexbox. Its handles it easily.
Have a look at the snippet below (resize your browser to see them in action):
.outer {
display: flex;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 100px;
padding-top: 10px;
text-align: center;
background: #eee;
border: 3px solid #aaa;
margin: 20px;
}
body {
padding: 20px;
}
<div class="outer">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
Hope this helps!
As an alternative to the other options I would suggest a look at isotope (http://isotope.metafizzy.co/). The benefits of using this over a pure css solution would become more apparent if you decided to include any filtering or sorting of your shopping items.
You can use flex-basis to ensure your elements are always 200px if it cannot grow nor shrink.
Using the flex shorthand property:
flex: 0 0 200px; /* 'flex-grow: 0' 'flex-shrink: 0' 'flex-basis: 200px' */
.items {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item {
box-sizing: border-box;
flex: 0 0 200px; /* <'flex-grow'> <'flex-shrink'> <'flex-basis'> */
height: 100px;
margin-bottom: .5em; /* Space between flex-items vertically*/
text-align: center;
border: 2px dashed grey;
}
<div class="row">
<div class="col-sm-12">
<div class="items">
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
</div>
</div>
</div>
Notes:
In the demo we use the recommended syntax, which is using
the flex shorthand property.
Do not overuse the !important flag. It should not be needed in any of your classes.
Removed vendor prefixes for demo simplicity.
Question: How can I get a border to stretch to the height of the parent and surround child cell. Given I am using flexbox and aligning to baseline.
Can this be done with all css?
More Details:
I am using flex box to align my items in each row to a certain baseline. It is centered on each cell under "center here" in the following picture:
When I hover currently on each item it hovers with a solid line with a 10px margin around each cell:
I want the on hover border to stretch to the top and bottom of the row on hover like this:
That way when I hover on each item, their hover border boxes would line up like this:
^ this is what I would like it to look like if I turn hover on, on each cell.
codepen
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
}
.flex-container {
overflow: hidden; position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 350px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>
Just a few rules that you'll need to adjust to your flex items:
.flex-item {
border: 1px solid lightblue;
transition: .7s;
display: flex;
align-items: flex-end;
}
.flex-container {
overflow: hidden;
position: relative;
display: -webkit-flex;
display: flex;
width: 400px;
height: 350px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
justify-content: flex-start;
}
See code snippet below:
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
transition: .7s;
display: flex;
align-items: flex-end;
}
.flex-container {
overflow: hidden;
position: relative;
display: -webkit-flex;
display: flex;
width: 400px;
height: 350px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
justify-content: flex-start;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>
How can I force flexbox items to have same height.
In examples I found online, people are using align-items: stretch css property, but my example is more complex.
Here is a codepen example:
.container {
background-color: red;
display: flex;
align-items: stretch;
}
.boxes {
background-color: yellow;
margin: 5px;
display: flex;
}
.boxes-column {
flex-direction: column;
}
.box {
background-color: green;
width: 100px;
margin: 5px;
}
.heading {
background-color: pink;
}
<body>
<div class="container">
<div class="boxes boxes-column">
<div class="heading">This is heading</div>
<div class="boxes">
<div class="box">Content content content content content content content</div>
<div class="box">Content content</div>
<div class="box">Content</div>
<div class="box">Contento contento</div>
<div class="box">Cc</div>
<div class="box">Contetno contento contento</div>
</div>
</div>
<div class="boxes boxes-column">
<div class="heading">This is heading 2</div>
<div class="boxes">
<div class="box">Content</div>
<div class="box">Contentno Contetn</div>
<div class="box">C</div>
</div>
</div>
</div>
</body>
Height of items items below 'Heading' and height of items below 'Heading 2' should be equal.
Used this css and now the boxes have the same height:
.container > .boxes > .boxes {
flex: 1;
}
Take a look at the below snippet:
.container {
background-color: red;
display: flex;
align-items: stretch;
}
.boxes {
background-color: yellow;
margin: 5px;
display: flex;
}
.boxes-column {
flex-direction: column;
}
.box {
background-color: green;
width: 100px;
margin: 5px;
}
.heading {
background-color: pink;
}
.container > .boxes > .boxes {
flex: 1;
}
<body>
<div class="container">
<div class="boxes boxes-column">
<div class="heading">This is heading</div>
<div class="boxes">
<div class="box">Content content content content content content content</div>
<div class="box">Content content</div>
<div class="box">Content</div>
<div class="box">Contento contento</div>
<div class="box">Cc</div>
<div class="box">Contetno contento contento</div>
</div>
</div>
<div class="boxes boxes-column">
<div class="heading">This is heading 2</div>
<div class="boxes">
<div class="box">Content</div>
<div class="box">Contentno Contetn</div>
<div class="box">C</div>
</div>
</div>
</div>
</body>