Using Flexbox I have this simple example..
.container {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
height:100vh;
}
.box1{height:100%;background:green;}
.box2{height:100%;background:red;}
.box3{height:100%;background:yellow;}
<div class="container">
<div class="box1">
<img src="https://dummyimage.com/100x100/000/fff">
</div>
<div class="box2">
This is some dummy text
</div>
<div class="box3">
<img src="https://dummyimage.com/100x100/0020/66t">
</div>
</div>
https://jsfiddle.net/y07xr5q3/1/
I would like the content of each div to be vertically centered, is this something that should be done using standard CSS techniques or is there a flex specific way to do it?
Steps:
Make your child elements flex containers with display: flex;.
Set their vertical alignment with align-items: center.
Necessary CSS:
div.box {
align-items: center;
display: flex;
}
.container {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
height:100vh;
}
.box {
align-items: center;
display: flex;
}
.box1{height:100%;background:green;}
.box2{height:100%;background:red;}
.box3{height:100%;background:yellow;}
<div class="container">
<div class="box box1">
<img src="https://dummyimage.com/100x100/000/fff">
</div>
<div class="box box2">
This is some dummy text
</div>
<div class="box box3">
<img src="https://dummyimage.com/100x100/0020/66t">
</div>
</div>
Try this
.container {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
height:100vh;
}
.box1, .box2, .box3 {
display: flex;
align-items: center;
}
.box1{height:100%;background:green;}
.box2{height:100%;background:red;}
.box3{height:100%;background:yellow;}
<div class="container">
<div class="box1">
<img src="https://dummyimage.com/100x100/000/fff">
</div>
<div class="box2">
This is some dummy text
</div>
<div class="box3">
<img src="https://dummyimage.com/100x100/0020/66t">
</div>
</div>
Live demo https://jsfiddle.net/grinmax_/y07xr5q3/4/
Related
I want to stack 2 divs on top of each other aligned left and make the last div align right.
They should all 3 be vertically centered.
This is the markup I have. This can't be changed.
<div class="wrapper">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
This is how i want it to be.
Is this possible using Flex and not changing the markup?
Here you go:
.box{
width:100px;
height:100px;
background-color:red;
margin:5px;
}
.box:nth-of-type(3){
align-self:end;
}
.con{
display:flex;
width:350px;
height:250px;
flex-wrap:wrap;
flex-direction:column;
align-items:center;
justify-content:center;
background-color:yellow;
}
<div class="con">
<div class="box">001</div>
<div class="box">002</div>
<div class="box">003</div>
</div>
If you can add wrapper divs to those three divs you could do it as following:
You can wrap your first two divs in another div and apply justify-content: space-between to the container.
To center them vertically, add display: flex; and flex-direction: column to the wrapper class and add justify-content: center
.container {
display: flex;
justify-content: space-between;
}
.box {
background-color: green;
height: 100px;
width: 100px;
margin: 10px;
}
.col {
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="container">
<div class="col">
<div class="box">First</div>
<div class="box">Second</div>
</div>
<div class="col">
<div class="box">Third</div>
</div>
</div>
Im a new in css and html. How can I separate 2 divs equally from left and right?? Here's my html code.
<div class="first-div">
<h1>About<h1>
</div>
<div class="second-div">
<h1>Services<h1>
</div>
you can try this. Learn Bootstrap grid or flexbox that would be easy for these kinds of task.
.container{
width:100%;
display:flex; /* for display it's child div beside each other */
}
.first-div,.second-div{
width:50%; /* for divide container into 2 equal divs */
border: 1px solid black; /* for border around divs */
}
<div class="container">
<div class="first-div">
<h1>About<h1>
</div>
<div class="second-div">
<h1>Services<h1>
</div>
</div>
You have several options and it all depends on your exact use case.
The first option is to set both to 50% of the available width (left and right):
.first-div {
display: inline-block;
width: 50%;
}
.second-div {
display: inline-block;
width: 50%;
}
<div class="first-div">
<h1>About</h1>
</div><div class="second-div">
<h1>Services</h1>
</div>
Another option is to use flex:
.wrapper {
display: flex;
}
.first-div {
flex-grow: 1;
}
.second-div {
flex-grow: 1;
}
<div class="wrapper">
<div class="first-div">
<h1>About</h1>
</div>
<div class="second-div">
<h1>Services</h1>
</div>
</div>
If you're not familiar with flex, flexbox froggy is a great interactive way to learn.
And a final option is to use grid:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
<div class="wrapper">
<div class="first-div">
<h1>About</h1>
</div>
<div class="second-div">
<h1>Services</h1>
</div>
</div>
If you're not familiar with grid, grid garden is a great interactive way to learn.
Sidenote: make sure to also properly close the <h1> tags with a </h1>.
Try this code. Hope it useful for your question.
/* CSS */
.container-box{
width:100%;
display:flex;
}
.first-div,.second-div{
width:50%;
border:1px solid #ddd; //just to look
}
<!-- HTML -->
<div class="container-box">
<div class="first-div">
<h1>About<h1>
</div>
<div class="second-div">
<h1>Services<h1>
</div>
</div>
Check Css FlexBox .
FlexBox Tutorial
<div class="mainContainer" style="
display: flex;
justify-content: space-around;
">
<div class="first" style="
border: 1px solid;
">
<h1>About</h1><h1>
</h1></div>
<div class="second-div">
<h1>Services</h1><h1>
</h1></div>
</div>
I have an image inside a div with a class of col-md-6 and I'm trying to position text next to the image right in the middle. What code works for that? The only way I've found possible, but not accurate is by messing with the padding.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#wrapper2 h1 {
text-align: center
}
#wrapper2 p {
text-align: center;
}
.col-md-6 {
padding: 0;
}
<div class="container-fluid">
<div id="wrapper2">
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/47/3d/e8/473de83da9ad0e72e340022bb68e9429.jpg>
</div>
<div class="col-md-6">
<h1>Men's Line</h1>
<p>Shop our newest 2017 arrivals</p>
</div>
</div>
</div>
</div>
https://jsfiddle.net/u5qngm5q/
You need to define your own custom column css class and set its display to table-cell. Finally, make vertical-align and text-align properties to middle.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#wrapper2 h1 {
text-align: center
}
#wrapper2 p {
text-align: center;
}
.col-md-6 {
padding: 0;
}
.custom-column{
display:table-cell;
height:100%;
width:50%;
vertical-align:middle;
text-align:center
}
<div class="container-fluid">
<div id="wrapper2">
<div class="row">
<div class="custom-column">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/47/3d/e8/473de83da9ad0e72e340022bb68e9429.jpg>
</div>
<div class="custom-column">
<h1>Men's Line</h1>
<p>Shop our newest 2017 arrivals</p>
</div>
</div>
</div>
</div>
Adding display: flex; and align-items: center; to the .row class will have this effect. Also adding flex-wrap: wrap; will make the code responsive. Then add flex-grow:1; to your text container for centering the text in mobile view Fiddle
HTML
<div class="row flex-center">
<div class="col-md-6 text-container">
<h1>Men's Line</h1>
<p>Shop our newest 2017 arrivals</p>
</div>
</div>
CSS
.flex-center {
align-items: center;
display: flex;
flex-wrap: wrap;
}
.text-container {
flex-grow : 1;
}
i'm trying to wrap the content and a vertical bar.
right now when the Viewport increate the Content and the Bar move away from each other (the Bar to the right and the Content to the left)
But i want them to Seperate to a specific amount and stay like that.
This is my Screendesign:
enter image description here
And that would be my Code right now:
<!DOCTYPE HTML>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="navhm">
</div>
<div id="space">
</div>
<div id="wrapperres">
<div id="pfosten">
</div>
<div id="contwrap">
<div id="content">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
And thats my CSS
http://codepen.io/Blackcan/pen/AXovrL
Any Advices are welcome!
I would use flexbox for this.
Let's say your HTML looks like this:
<div class="container">
<div class="content-left">
<div class="nav-fixed">
</div>
<div class="content">
</div>
</div>
<div class="social-media">
</div>
</div>
Then you could use in your CSS:
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.content-left {
flex: 0 0 60vw;
overflow-y: scroll;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.social-media {
flex: 0 0 20vw;
}
.nav-fixed {
flex: 0 0 40px;
}
.content {
flex: 0 0 300px;
}
Codepen: https://codepen.io/J-DD/pen/QErjLE
More about flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://thenewcode.com/780/A-Designers-Guide-To-Flexbox
I have multiple divs in another div
<div class="container">
<div id="div1">text1</div>
<div id="div2">text2</div>
<div id="div3">another text</div>
...
<div id="divN">text N</div>
</div>
Each inner div has not set width property, but it has display: inline-block so each div suits to its content (text). If I leave them like this inner divs fill horizontally browser until they meet end of line and they begin from the left side. It is fine for me. But unfortunately each "line" of divs ends up in a different distance from right side. I'd like to justify them like i can justify a text. I tried display: flex and justify-content: space-around css methods, but they put all inner divs in one line so the part of them is outside the screen. Is there a way to achieve my goal? Pure css would be the best solution.
If you use inline-block elements, you can set their alignment with text-align:
This property describes how the inline-level content of a block is
aligned along the inline axis if the content does not completely fill
the line box.
Note the last line behaves differently, if you want to justify it too you should also use text-align-last:
This property describes how the last line of a block or a line right
before a forced line break is aligned when ‘text-align’ is ‘justify’.
text-align: justify;
text-align-last: justify;
.container {
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
border: 1px solid;
width: 500px;
}
.item {
width: 100px;
border: 1px solid blue;
display: inline-block;
}
<div class="container">
<div class="item">text1</div>
<div class="item">text2</div>
<div class="item">text3</div>
<div class="item">text4</div>
<div class="item">text5</div>
<div class="item">text6</div>
</div>
If you use flexbox, this will no longer apply. However, you can set justify-content to space-around or space-between to justify.
The justify-content property aligns flex items along the main axis of
the current line of the flex container.
Note that, by default, flexbox containers are single-line. If you want to make them multi-line, use the flex-wrap property:
The flex-wrap property controls whether the flex container is
single-line or multi-line
justify-content: space-around;
flex-wrap: wrap;
.container {
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
border: 1px solid;
width: 500px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 100px;
border: 1px solid blue;
}
<div class="container">
<div class="item">text1</div>
<div class="item">text2</div>
<div class="item">text3</div>
<div class="item">text4</div>
<div class="item">text5</div>
<div class="item">text6</div>
</div>
Yes, examples with
text-align & inline-block
justify-content & flex , wrap
/* inline-block (childs ) */
.container {
display:inline-block;
text-align:justify;
vertical-align:top;
background:tomato;
font-size:0;/*for last pseudo line to use no space optionnal */
}
.container:after, body:after {
content:'';
display:inline-block;
width:100%;
vertical-align:top;/* remove gap underneath*/
}
/* flex (parent */
.container2 {
display:inline-flex;
flex-wrap:wrap;
justify-content:space-between;
background:turquoise;
}
/* both */
body>div {
width:200px;
padding:3px;
border:solid;
}
div div {
font-size:1rem;/* if font-size parent was set to 0 */
display:inline-block;
background:rgba(0,0,0,0.2)/* lets see them a bit*/;
}
div div:first-child {/* or any elements that needs to span a line */
color:white;
font-weight:bold;
background:none;
width:100%;/* 100% = full line */
text-align:center;
}
/* snippet */
body {
margin:50px;
text-align:justify;
}
kbd {
color:brown
}
<div class="container">
<div >INLINE-BLOCK <kbd>IE8</kbd></div>
<div >text1</div>
<div >text2</div>
<div >another text</div>
<div >text N</div>
<div >text1</div>
<div >text2</div>
<div >another text</div>
<div >another text</div>
<div >text N</div>
<div >text N</div>
<div >text1</div>
<div >text2</div>
<div >another text</div>
<div >text N</div>
<div >another text</div>
<div >text N</div>
<div >text1</div>
</div>
<div class="container2">
<div >INLINE-FLEX <kbd>IE11</kbd></div>
<div >text1</div>
<div >text2</div>
<div >another text</div>
<div >text N</div>
<div >text1</div>
<div >text2</div>
<div >another text</div>
<div >another text</div>
<div >text N</div>
<div >text N</div>
<div >text1</div>
<div >text2</div>
<div >another text</div>
<div >text N</div>
<div >another text</div>
<div >text N</div>
<div >text1</div>
</div>