This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 3 years ago.
I'm trying with 4 div to get this result in flex. I have my container in display: flex; how to get this result ?
<div class="pictures">
<div class="big"></div>
<div class="small"></div>
<div class="small"></div>
<div class="bottom"></div>
</div>
<div style="display: flex; flex-direction: row;">
<girl/>
<div style="display: flex; flex-direction: column;">
<div style="display: flex; flex-direction: row;">
<horizontal lines image/>
<vertical lines image/>
</div>
<sweet escape image/>
</div>
</div>
The concept you are missing is the "flex-direction" one. It tells the flex box to layout the children either in a row or column. You just need to use that, and nest them!
Related
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 3 years ago.
So basically, what I have here is a contact page, that shows each contact's info inside a card. It's basically flex container with flex items. I want cards to expand to full width of a first row (5 cards in a row on desktop). I have managed to achieve that but what I want to have is to have all the cards be the same width. For example if user has 7 contacts, first 5 cards will be displayed in a first row nicely, but second two will expand to take the full width of the second row. Is it possible to make those cards the same width as others?
<div class="d-flex flex wrap">
<div class="contact-card">
<div>
<div class="contact-card">
<div>
<div class="contact-card">
<div>
<div class="contact-card">
<div>
<div class="contact-card">
<div>
</div>
.contact-card {
flex: 1 1 0;
}
It looks like a straight forward Bootstrap layout. I copied CSS from Bootstrap CSS.
You can adjust width (and consequently number of columns) in a row by setting flex:0 0 16.666667% and max-width: 16.666667%; to custom values.
.row {
display: flex;
flex-wrap: wrap;
}
.col-2 {
width: 100%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
/*DEMO*/
*,*::before,*::after{box-sizing:border-box}
.col-2{height:80px;border:1px red solid}
<div class="row">
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
</div>
I'm trying to left align B and then right align C only if there is space, if there is not enough space, how do I make just position itself after B instead of right aligning? is this only doable with javascript or can I do it from CSS?
<div class='A'>
<div class='B'/>
<div class='C'/>
<div>
I actually have it working using javascript to apply css classes and update based on those, but I was wondering if it was possible without doing that.
You can use flexbox. By using justify-content:space-between; items takes space in between of them
.A{
display:flex;
justify-content:space-between;
}
<div class="A">
<div class="B">B</div>
<div class="C">C</div>
</div>
Try out display: flex
like this:
<div class=‚flex a‘>
<div class=‚b‘></div>
<div class=‚spacer‘></div>
<div class=‚c‘></div>
</div>
And use this CSS
.flex {
display: flex;
flex-wrap: wrap;
}
.spacer {
flex: 1 1 auto
}
For more information how flex works look here
Yes you can use
flex-wrap: wrap;
remove display flex in your style
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
I have a div with two items in it. I put them in a column an needed the first item to justify: center and the second one to justify: flex-end. How do I do this?
HTML:
<div class="wrapper wrapper--login">
<h1 class="wrapper--login__title">
Demo or Die
</h1>
<a class="btn wrapper--login__btn" href="#">
Log in
</a>
</div>
css:
.wrapper--login{
display: flex;
flex-direction: column;
justify-content: flex-end;
}
The wrapper need a height and the title margin: auto 0
Note, this will center the item in the available space left (container minus bottom element), not in the center of the container.
To center it relative to the container, check these posts:
center-and-bottom-align-flex-items
center-and-right-align-flexbox-elements
.wrapper--login{
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 200px;
}
.wrapper--login__title {
margin: auto 0;
}
<div class="wrapper wrapper--login">
<h1 class="wrapper--login__title">
Demo or Die
</h1>
<a class="btn wrapper--login__btn" href="#">
Log in
</a>
</div>
I have a 2x2 grid next to one big image that I need to line up. (here's a codepen) I used a combination of Bootstrap 3.3.7 and Flexbox and it looks great in everything BUT IE (go figure). I'm just beating my head against a wall trying to fix this.
I've got everything for the 2x2 grid positioned in a row like so.
<div class="row || flex-row">
<div class="col-xs-12 || col-md-6 || core-values-left">
<div>
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corevaluesmain-1.jpg">
</div>
</div>
<div class="col-xs-12 || col-md-6 || core-values-right">
<div class="row">
<div class="col-xs-12 || col-md-6 || core-values-section">
<div class="core-values-img">
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/coretopleft.jpg">
<h4 class="core-values-heading">We Scout</h4>
<div class="core-hover">
<h5>We are a talent scout and agent for the grocery industry</h5>
<div>
Learn more
</div>
</div>
</div>
</div>
<div class="col-xs-12 || col-md-6 || core-values-section">
<div class="core-values-img">
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/coretopright-1.jpg">
<h4 class="core-values-heading">We Discover</h4>
<div class="core-hover">
<h5>We seek out new CPG opportunities and innovations</h5>
Learn More
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 || col-md-6 || core-values-section">
<div class="core-values-img">
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corebottomleft.jpg">
<h4 class="core-values-heading">We Grow</h4>
<div class="core-hover">
<h5>We expand your brand’s horizons and elevate your success</h5>
Learn more
</div>
</div>
</div>
<div class="col-xs-12 || col-md-6 || core-values-section">
<div class="core-values-img">
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corebottomright.jpg">
<h4 class="core-values-heading">We Champion</h4>
<div class="core-hover">
<h5>We value our client relationships and always go the extra mile</h5>
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
Then I applied this css to the row and columns to line it up with flex. Works like a charm....except in IE
.flex-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.flex-row > [class*='col-'] {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
Things I've tried:
Adding min-height to the columns
Wrapping the rows in another div to
make them non-flex containers
Explicitly setting flex: 1 1 0% on the
rows and the columns
Rubbing a magic lamp and summoning a genie to
fix my problem
Does anyone has a clue what might be happening??? I hate IE so much.
First you have IE, which does everything it can to prevent coding from being fun or easy...
Then you have the many flexbox-related bugs in IE10 and IE11...
Add to that the multiple bugs related to flex-direction: column...
Then finally throw images into flex items (an entirely different set of challenges and inconsistencies)...
And you're pretty much guaranteed to find trouble.
My suggestion would be to switch the flex container from column to row. This should make your layout easier to handle by IE browsers.
Try these adjustments:
.flex-row > [class*='col-'] {
display: flex;
/* flex-direction: column; */
flex-direction: row; /* new */
flex-wrap: wrap; /* new */
align-content: space-between; /* new */
}
.core-values-left > div {
flex: 1; /* new */
}
revised codepen
I am trying to create a masonry layout using flexboxes but I can't find a way to fill the gaps.
I attached a code pen example below
http://codepen.io/anon/pen/KpgMKX?editors=110
.wrapper {
margin: auto;
width: 1024px;
height: 100%;
display: flex;
flex-flow: row wrap;
align-items: stretch;
align-content: stretch;
}
Update:
Please note that flex-direction: column will not work for me as it breaks the order of the content.
Here's how I would do it:
http://codepen.io/anon/pen/gpwwpX
I made two more wrappers, one that is for the two boxes on the left and one that surrounds the two wrappers. Like this:
<div class="big-wrapper">
<div class="wrapper2">
<div class="box oneTwo"></div>
<div class="box oneOne"></div>
</div>
<div class="wrapper">
<div class="box oneOne"></div>
<div class="box oneOne"></div>
<div class="box twoOne"></div>
<div class="box oneTwo"></div>
<div class="box threes"></div>
</div>
</div>
Then in the CSS I just added the two new wrappers adjusted their widths a bit, but you can play with that of course.