// 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>
Related
.container {
display: flex;
justify-content: left;
}
.containertwo {
display: flex;
justify-content: right;
}
.center {
text-align: center
}
<div class="container"> //component1
<div class="one">some content</div>
</div>
<div class="center"> //middle component
<div class="middle">middle content</div>
</div>
<div class="containertwo"> //component2
<div class="two">some content</div>
</div>
I have three components namely, component1, component2, middlecomponent.
All these components are loaded in app.vue. And I am able to, load all the components into one components called App.vue.
But coming to css wise. Not sure how to align them using flexbox properties in css?
You need change your structure. the container should be flex and for alignment you can use align-items:center, also I set a gap between components.
there is no need to those class you have written.
this link can help you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
display: flex;
align-items: center;
gap: 40px;
}
<div class="container">
<div> //component1
<div class="one">some content</div>
</div>
<div class="center"> //middle component
<div class="middle">middle content</div>
</div>
<div class="containertwo"> //component2
<div class="two">some content</div>
</div>
</div>
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'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/
I am new to responsive design.
I have 4 floating left divs. but what I want to do is reverse the divs so that will look more responsive.
So the page currently displays
FirstSecondThirdFourth
What I want is:
FourthThirdSecondFirst
Fiddle
#block-1,
#block-2,
#block-3 {
float: left;
}
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
<div id="block-4">Fourth</div>
</div>
you can use flex-direction: row-reverse and justify-content:flex-end (this is optional given what you want to do)
#example {
display: flex;
flex-direction: row-reverse;
justify-content:flex-end
}
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
<div id="block-4">Fourth</div>
</div>