I'm trying to center two div Horizontally, and align one at the Middle of the parent container, and the second one at the Bottom of the parent container. I'm using Foundation 6, with the Flexbox version.
Html
<section id="hero">
<div class="row align-middle align-center">
<h1>Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p>Some text</p>
</div>
</section>
Css
#hero {
height: 100vh;
display: flex;
flex-wrap: wrap;
}
The problem is that every div in the flex container (#hero) appear on the same line.
Thank's for helping !
Pretty sure you have to add the class column to the sub element of row like so:
id="hero">
<div class="row align-middle align-center">
<h1 class="column">Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p class="column">Some text</p>
</div>
</section>
I finally found how to align vertically 3 divs using a Flexbox. Foundation wasn't really in the problem.
I made a Js Fiddle for those who have the same question:
.wrapper {
display: flex;
flex-direction: column;
height:90vh;
}
.center {
width: 100%;
flex-grow: 1;
align-items: center;
display:flex;
}
.a {
width: 100%;
}
<div class="wrapper">
<div class="a">Header</div>
<div class="center">Body</div>
<div class="a">Footer</div>
</div>
JSFiddle: https://jsfiddle.net/ek38ff5r/20/
Related
How can I go about splitting the screen like in the screenshot? The website in the screenshot is mine and I've designed it in Elementor but now I want to code it. How can I do that with css and maybe Boostrap?
Visit mateusrdesign.com to check it for yourself.
Screenshot
Screenshot #02 (notice how the screen is smaller and there is no horizontal scroll bar
Here's what I've tried:
<div class="container">
<div class="row">
<div id="left" class="col-3">
<p>Place holder</p>
</div>
<div id="right" class="col-9">
<p>Place holder</p>
</div>
</div>
</div>
You can achieve this with a flex box:
.row {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.row #left {
background: yellow; /** Just to emphasize vertical split visually. You can remove this */
width: 50%;
}
.row #right {
background: green; /** Just to emphasize vertical split visually. You can remove this */
flex: 1;
}
<body style="height: 100vh;">
<div class="row w-100 h-100">
<div class="col bg-info">Left side</div>
<div class="col bg-dark">Right side</div>
</div>
</body>
This is one of the bootstrap way. Dont forget to import bootstrap cdn to html.
I am new to flexbox and I have been trying to make a description list aligned in pairs stacked on top of each other like in a table.
I have tried some flexbox techniques but nothing is working
This is the markup
<div class="ad-overview">
<h3>Overview</h3>
<dl>
<dt>Mileage(KM)</dt>
<dd>4300</dd>
<dt>Condition</dt>
<dd>Locally used</dd>
<dt>Body Type</dt>
<dd>4 wheel drives & Suvs</dd>
<dt>Colour</dt>
<dd>Black</dd>
<dt>Fuel</dt>
<dd>Diesel</dd>
<dt>Transmission</dt>
<dd>Automatic</dd>
<dt>Duty Type</dt>
<dd>Paid</dd>
<dt>Interior</dt>
<dd>Leather</dd>
<dt>Engine size</dt>
<dd>2993</dd>
<dt>Year</dt>
<dd>2012</dd>
</dl>
</div>
This is my css
.ad-overview,
dl {
display: flex;
}
dl {
flex-wrap: wrap;
}
dt {
font-weight: bold;
}
dt+dd {
display: flex;
}
This is the layout style I am trying to achieve. Some help would be appreciated
There's many solutions to your problem, the simpliest one is by putting each pair of td and dd inside a block, and set that block as a flexbox with a flex-direction:column, and you will also have to add a wrap to make it look stacked, this is the main idea, then you will have to make some modifications on the code for the margin for example, the width of your blocks and so on, these are up to you, the following code will show you the solution:
.ad-overview,
dl {
display: flex;
flex-direction:row;
justify-content: space-between;
flex-wrap: wrap;
}
.col{
display:flex;
flex-direction:column;
text-align:left;
width: 30%;
margin-bottom: 3%;
}
dt {
font-weight: bold;
}
dd{
margin-left:0px;
width: 100%;
}
<div class="ad-overview">
<h3>Overview</h3>
<dl>
<div class="col">
<dt>Mileage(KM)</dt>
<dd>4300</dd>
</div>
<div class="col">
<dt>Condition</dt>
<dd>Locally used</dd>
</div>
<div class="col">
<dt>Body Type</dt>
<dd>4 wheel drives & Suvs</dd>
</div>
<div class="col">
<dt>Colour</dt>
<dd>Black</dd>
</div>
<div class="col">
<dt>Fuel</dt>
<dd>Diesel</dd>
</div>
<div class="col">
<dt>Transmission</dt>
<dd>Automatic</dd>
</div>
<div class="col">
<dt>Duty Type</dt>
<dd>Paid</dd>
</div>
<div class="col">
<dt>Interior</dt>
<dd>Leather</dd>
</div>
<div class="col">
<dt>Engine size</dt>
<dd>2993</dd>
</div>
<div class="col">
<dt>Year</dt>
<dd>2012</dd>
</div>
</dl>
</div>
I try to make a layout with a right column with bootstrap. However, I don't know how to do it in order to have a disposition like this.
I've tried different things but the right column doesn't have the size of the content of the left. I'm on bootstrap 3.
This is what've tried but has you can see the right column doesn't have the height of the 3 left content.
bootply
Can you help me?
You can do it using bootstrap rows/cols, and add flexbox on top. You could do this with bootstrap alone if you used bootstrap 4, since it utilizes flex instead of floats for the rows/cols.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.flex {
display: flex;
}
.wrap {
flex-wrap: wrap;
}
.red {
background: red;
}
.blue {
background: blue;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
</style>
<div class="container">
<div class="row flex">
<div class="col-xs-8">
<div class="row flex wrap">
<div class="col-xs-6 red">1</div>
<div class="col-xs-6 yellow">2</div>
<div class="col-xs-12 blue">3</div>
</div>
</div>
<div class="col-xs-4 green">4</div>
</div>
</div>
Looks like what you are wanting to do is something like:
<div class="row equal-height-cols">
<div class="col-md-8">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-4"></div>
</div>
.equal-height-cols{
display: flex;
flex-wrap: wrap;
justify-content: stretch;
}
You will need to pus some content in there to see it in action, but that should set you up with what you are looking for.
*edit: misunerstood exact meaning of questions, updated
You can use flexbox, it is the best approach for this, or your can use your right column as a absolute position and make it height: 100% and width: 100%, providing a max-width size, please see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here you have a codepen demo :D
https://codepen.io/johuder33/pen/awYoBo
I am making a site that will have three cards and to create them I'm using flex box. I am using justify-content: space-between which works perfectly when the three columns are all on the same row, as their margins are perfect with the container, and the space in-between them is great.
However, when the columns wrap, the column that is now on the new row is at the same left margin as the first, which is expected with space-between, but in my scenario, space-around's wrap behavior would look much better, as I have and odd number of cards.
Is there a way for me to get space-between's outer margin alignment with space-around's wrapping behavior?
Here is a codepen that gives a quick example of what I have now.
https://codepen.io/anon/pen/xdrpEo
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: spacing-between;
}
.file-links-flex-container {
max-width: 400px;
flex-grow: 1;
background-color: red;
}
.container-content {
justify-content: flex-start;
padding: 0 30px;
max-height: 600px;
}
<div class="flex-row space-around">
<div class="file-links-flex-container col">
<div class="container-header">
<h5>A</h5>
</div>
<div class="container-content">
<p>I AM TEST CONTENT!</P>
</div>
</div>
<div class="file-links-flex-container col">
<div class="container-header">
<h5>B</h5>
</div>
<div class="container-content">
<p>I AM TEST CONTENT!</P>
</div>
</div>
<div class="file-links-flex-container col">
<div class="container-header">
<h5>C</h5>
</div>
<div class="container-content">
<p>I AM TEST CONTENT!</P>
</div>
</div>
</div>
Try adding margin: 0 auto, You get that.
.file-links-flex-container{
margin: 0 auto;
}
I think this one helped you. :)
Even you can solve this one using justify-content:center; but margin will be the good one.
// Excuse my beginner's English
Hello!
Can i implement follow construction:
<div class="flex-container-1">
<div class="flex-element-1 flex-container-2">
<div class="flex-element-2">...</div>
<div class="flex-element-2">...</div>
</div>
<div class="flex-element-1 flex-container-2">
<div class="flex-element-2">...</div>
<div class="flex-element-2">...</div>
</div>
</div>
My simple attempt:
.flex-container-1, .flex-container-2 {
display: flex;
}
.flex-element-1, .flex-element-2 {
flex: auto;
}
... is not correct.
Making this more flatten is not way for me, because i need grouping container.
Have any ideas?
Thanks!
I don't know what you want to do, but in your example you only use display: flex on the container. Flex box has more possibilities, and you can read about them here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
For example if you use flex-direction: column on the flex-container-2 you will get something like this:
.flex-container-1, .flex-container-2 {
display: flex;
}
.flex-container-2 {
flex-direction: column;
}
.flex-element-1, .flex-element-2 {
flex: auto;
}
<div class="flex-container-1">
<div class="flex-element-1 flex-container-2">
<div class="flex-element-2">1...</div>
<div class="flex-element-2">1...</div>
</div>
<div class="flex-element-1 flex-container-2">
<div class="flex-element-2">2...</div>
<div class="flex-element-2">2...</div>
</div>
</div>