This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 1 year ago.
I'm trying to create this style of gallery layout with flexbox, but running into some trouble.
So far my code is putting two small ones and the large one in the top row, and then the second small ones on the bottom row.
Something like this.
.container {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.item {
width: 100%;
margin: 1em;
}
.content {
border: 1px solid black;
margin-bottom: 1em;
height: 100%;
}
<div class="container">
<div class="item">
<div class="content">half</div>
<div class="content">half</div>
</div>
<div class="item content">full</div>
<div class="item">
<div class="content">half</div>
<div class="content">half</div>
</div>
</div>
Html
<div class"parent">
<div class="leftContent"></div>
<div class="centerContent"></div>
<div class="rightContent"></div>
</div>
Css
.parent{
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
}
.leftContent{
display: flex;
justify-content: space-between;
height: 100%;
flex-direction: column;
align-items: stretch;
}
.rightContent{
display: flex;
justify-content: space-between;
height: 100%;
flex-direction: column;
align-items: stretch;
}
add now the contents in the divs. i think this should work
Related
This question already has answers here:
How to center a flex container but left-align flex items
(9 answers)
Closed 6 months ago.
If I do justify-content: center; cards are centered, but it looks quite rough if there aren't an even number of cards. So, I did justify-content: flex-start; and now I need to center them while are aligned left, I don't want the negative space, is it possible to do so with flexbox?
<section>
<div class="wrap">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</section>
section {
width: 100%;
display: flex;
justify-content: center;
}
.wrap {
display: flex;
flex-wrap: wrap;
width: 80%;
justify-content: flex-start;
}
.card {
width: 300px;
height: 200px;
}
Want it like this:
Instead of this:
Consider grid:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
width: 100%;
display: flex;
justify-content: center;
}
.wrap {
display: flex;
flex-wrap: wrap;
width: 80%;
justify-content: center;
}
.consider_grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
row-gap: 10px;
}
.card {
background-color: pink;
width: 300px;
height: 200px;
}
<section>
<div class="wrap">
<div class="consider_grid">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
</section>
I've tried using text-align and justify-content but both of them refuse to work. I think I've made a mistake with all the spacings.
Here's the HTML:
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
.contents1 {
display: flex;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1>This website is awesome</h1>
<p>This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
Put the justify-contents and align-items into class image
.container1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image{
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
It is a good practice to first add some background-color to better see where each element is and then remove these dumb colors.
For the container which has a display:flex, please add
width:100%;
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 75%;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 75%
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
Assuming you want to center the container1 div with the image placeholder div, the issue is that your divs don't have an assigned with. Set their width to a percentage less than the parent and then use the CSS property margin: auto. You will also need to apply flex-direction: column to your parent div, contents1
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 400px;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
This question already has answers here:
Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
(3 answers)
Closed 2 years ago.
I created this css snippet.
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
height: calc(100vh - 50px);
}
.container__img {
display: flex;
flex-direction: column;
}
.header {
background-color: red;
padding: 25px;
}
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
I set 100vh to have the page 100% of page height, but appears the next issue when i resize the page vertically:
How you can see the image goes over the header, but it should stop when is near header like:
Question: Why it is happening and how to solve this?
Make it a habit for yourself to wrap all the divas in the main div:
<div class="main">
...
</div>
When this main div is absent in the structure of html, then problems may arise in the future.
I made some changes to the css. If you have any questions, then ask me.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
flex: auto;
}
.container__img {
display: flex;
flex-direction: column;
}
.header {
background-color: red;
padding: 25px;
}
<div class="main">
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
</div>
When you resize the page vertically, the image goes over the header because the div "container__inner" and the div "container__img" have height: auto (by default). That means their height will be equal to the maximum height of the elements inside (here is the img).
To solve this problem, you just need to set height: 100% for one of them. Then its height will not exceed the height of the parent element (the div "container")
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
flex: auto;
}
.container__img {
display: flex;
flex-direction: column;
text-align: center;
}
.header {
background-color: red;
padding: 25px;
text-align: center;
}
<div class="main">
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
</div>
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 3 years ago.
I am trying to create a Bootstrap-like grid of cards using CSS flex properties. I have 10 cards (4 each row). However, when using justify-content: space-around (this is what I need), the last row is not aligning with the others (naturally). What is the workaround?
.card-gallery {
width: 100%;
height: auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
flex-direction: row;
}
.card-box {
width: 270px;
height: 400px;
background: red;
}
<div class="container">
<div class="card-gallery">
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
</div>
</div>
You could try CSS :last-child as in the example below to use different style in your last div.
.flexbox {
display: flex;
flex-flow: column;
}
.flex-child {
background: red;
align-content: center;
align-self: center;
}
.flex-child:last-child {
align-content: space-around;
align-self: flex-start;
}
<div class="flexbox">
<div class="flex-child">
one
</div>
<div class="flex-child">
two
</div>
<div class="flex-child">
three
</div>
</div>
By the way space-between and applying relative width to your card div works better.
.card-gallery {
width: calc(100% -2rem);
height: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
padding: 1rem;
}
.card-box {
width: 45%;
height: 40px;
background: #ff0;
align-self: center;
}
div.card-box:last-child {
align-self: flex-start;
}
<div class="container">
<div class="card-gallery">
<div class="card-box">1</div>
<div class="card-box">2</div>
<div class="card-box">3</div>
<div class="card-box">4</div>
<div class="card-box">5</div>
<div class="card-box">6</div>
<div class="card-box">7</div>
</div>
</div>
You can't achieve this easily with flexbox.
Instead, set .card-gallery to display:grid to make sure the cards always line up in a grid formation when multiple rows exist. Then give it this style rule:
grid-template-columns: repeat(auto-fill, 120px)
The auto-fill keyword will make sure the items will wrap when the viewport shrinks:
.container{max-width:479px;background:lightblue}
.card-gallery {
width: 100%;
height: auto;
display: grid;
grid-template-columns: repeat(auto-fill, 120px);
justify-content: space-around;
}
.card-box {
height: 100px;
background: #fff;
margin-bottom:30px;
border:solid 2px dodgerblue
}
<div class="container">
<div class="card-gallery">
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
</div>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 5 years ago.
I have this markup
.course-flex-container {
display: flex;
flex-direction: column;
margin: 5px 5px 5px 5px;
background-color: red;
}
.course-flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.course-flex-row-2 {
display: flex;
flex-direction: row;
}
<div class="course-flex-container">
<div class="course-flex-row">
<div>edit</div>
<div>delete</div>
</div>
<div class="course-flex-row-2">
<div>Read Chapter 1 to 3</div>
</div>
<div class="course-flex-row">
<div>Blaw 3100</div>
<div>Due Date: 6/29/2017</div>
</div>
</div>
I tried to align the <div>Read Chapter 1 to 3</div> but it won't align to center when I use text-align: center; I tried on the that div and on its parent div.
I removed text-align from my code as it was not working that's why you don't see it.
Use justify-content: center to .course-flex-row-2
.course-flex-container {
display: flex;
flex-direction: column;
margin: 5px 5px 5px 5px;
background-color: red;
}
.course-flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.course-flex-row-2 {
display: flex;
flex-direction: row;
justify-content: center;
}
<div class="course-flex-container">
<div class="course-flex-row">
<div>edit</div>
<div>delete</div>
</div>
<div class="course-flex-row-2">
<div>Read Chapter 1 to 3</div>
</div>
<div class="course-flex-row">
<div>Blaw 3100</div>
<div>Due Date: 6/29/2017</div>
</div>
</div>
any of the DIVs that you would like to center the content of add
margin: auto;
to the CSS. You can also adjust the top and bottom margin by using
margin: 10px auto; //center with 10px top margin.
or
margin: 10px 10px auto; //center with 10px margin at top and bottom.
however....
text-align: center;
would center text only, not elements inside the div.
Change Like this :
First change className to class.
After Change Like This:
.course-flex-row-2{
display: flex;<-----------------Remove
flex-direction: row;
text-align: center;
}
.course-flex-row-2 div {<--------------Add
display: inline-block;
}
.course-flex-container {
display: flex;
flex-direction: column;
margin: 5px 5px 5px 5px;
background-color: red;
}
.course-flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.course-flex-row-2{
flex-direction: row;
text-align: center;
}
.course-flex-row-2 div{
display: inline-block;
}
<div class="course-flex-container">
<div class="course-flex-row">
<div>edit</div>
<div>delete</div>
</div>
<div class="course-flex-row-2">
<div>Read Chapter 1 to 3</div>
</div>
<div class="course-flex-row">
<div>Blaw 3100</div>
<div>Due Date: 6/29/2017</div>
</div>
</div>
I usually go with position absolute along with transform for inner div & position relative for outer div.
Check the same example in jsfiddle https://jsfiddle.net/f2vvy6st/
.course-flex-row-2 {
position: relative;
width: 400px;
height: 400px;
border: 1px solid red;
div {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top:50%;
}
}
put align attribute to the parent div, it should also work, (not recommended but will get you work)
<div className="course-flex-container" align="center">