.outer {
border: 2px solid red;
display: flex;
}
.inner {
border: 2px solid cyan;
display: flex;
flex-flow: column wrap;
align-self: center;
}
.innest {
border: 2px solid orange;
flex-grow: 1;
}
<div class="outer">
<div class="inner">
<div class="innest">a</div>
<div class="innest">b</div>
<div class="innest">c</div>
</div>
<div class="inner">
<div class="innest">d</div>
</div>
</div>
I've been trying to both stretch and center the 'd' element of the above code example for a while now, but haven't been able to come up with a solution. I have been able to either stretch it vertically, or center it vertically, but not both at the same time. How can I do that?
EDIT: I would like the element with the cyan border to extend the height of its parent (red), while its inner element (orange border) also extends the height of its parent (cyan). All while the 'd' content is being vertically centered.
I guess this is what you're looking for
.outer {
border: 2px solid red;
display: flex;
}
.inner {
border: 2px solid cyan;
display: flex;
flex-flow: column wrap;
align-self: center;
}
.second_inner {
display: flex;
flex-basis: auto;
}
.second_inner .innest {
display: flex;
align-items: center;
}
.innest {
border: 2px solid orange;
}
<div class="outer">
<div class="inner">
<div class="innest">a</div>
<div class="innest">b</div>
<div class="innest">c</div>
</div>
<div class="second_inner">
<div class="innest">d</div>
</div>
</div>
Related
So I am trying to move a div to the right inside flexbox.
I dont want to change justify-content to anything else, but I am trying to move the middle div to the right. However if I use margin and move it then the space around the whole parent div is also affected. Is it possible to move the middle div to the right without affecting the space of the whole div?
So far this solution kind of works- but the items will overlay on each other on smaller screen so this is not responsive at all:
.item2 {
margin-left: 100px;
margin-right: -100px;
border: 1px solid red;
}
But it doesnt seem very elegant. Is there a way to do it with flexbox only?
.main {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item1 {
border: 1px solid red;
}
.item2 {
margin-left: 100px;
margin-right: -100px;
border: 1px solid red;
}
<div class="main">
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item1">
Item 3
</div>
</div>
CSS transform can alter the positioning of an element but it doesn't affect surrounding elements.
This snippet removes the margin settings and instead uses transform: translateX(100px).
.main {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item1 {
border: 1px solid red;
}
.item2 {
/*margin-left: 100px;
margin-right: -100px;
*/
transform: translateX(100px);
border: 1px solid red;
}
<div class="main">
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item1">
Item 3
</div>
</div>
I think you could utilize the order property here
.main {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item1 {
border: 1px solid red;
}
.item2 {
order: 3;
border: 1px solid red;
}
<div class="main">
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item1">
Item 3
</div>
</div>
You can do it in several ways:
1)
transform: translateX(100px)
2)
position: relative;
left: 100px;
3) if you want to change order of flex-items, use this:
.flex-item-2{
order: 1
}
It moves second item to third. Because default order value: 0.
Maybe there are other useful ways you can use!
.main {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item1 {
border: 1px solid red;
}
.rightSide{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item2 {
border: 1px solid red;
}
<div class="main">
<div class="item1 leftSide">
Item 1
</div>
<div class="rightSide">
<div class="item2">
Item 2
</div>
<div class="item1">
Item 3
</div>
</div>
</div>
.main {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.parent {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.p-1{
flex-grow: 2;
}
.p-2{
flex-grow: 1;
}
.item1 {
border: 1px solid red;
}
.item2 {
border: 1px solid red;
}
.item3 {
border: 1px solid red;
}
<div class="main">
<div class="parent p-1">
<div class="item1">
Item 1
</div>
</div>
<div class="parent p-2">
<div class="item2">
Item 2
</div>
<div class="item3">
Item 3
</div>
</div>
</div>
I'm facing a issue of vertically aligning items when a div contains nested child elements, please check: https://codepen.io/akashpen0501/pen/rNaGgXv
Note, the container has a fixed height of 200px & I want them children to be centered vertically
Current result:
I want to align all divs vertically center, as
Required:
.container {
display: flex;
flex-flow: row;
align-items: center;
border: 1px solid black;
height:200px;
}
.container div {
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.container span {
display: block;
}
<div class="container">
<div>left</div>
<div>center<span class="nested child">nested content</span></div>
<div>right</div>
</div>
Please advice.
try align-items: flex-start on the container
.container{
display: flex;
flex-flow: row;
align-items: self-start;
border: 1px solid black;
}
.container div{
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.container span{
display: block;
}
<div class="container">
<div>left</div>
<div>center<span class="nested child">nested content</span></div>
<div>right</div>
</div>
You can approximate this using baseline alignment and pseudo element. Change baseline with center in the below example to see that left/right will stay at the same place.
.container {
display: flex;
flex-flow: row;
align-items: baseline;
border: 1px solid black;
height:200px;
background:linear-gradient(red,red) center/100% 1px no-repeat
}
.container:before {
content:"";
height:calc(50% + 0.25em)
}
.container div {
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.container span {
display: block;
}
<div class="container">
<div>left</div>
<div>center<span class="nested child">nested content</span></div>
<div>right</div>
</div>
<div class="container">
<div>left</div>
<div>center</div>
<div>right</div>
</div>
.container {
display: flex;
align-items: flex-start; // <----- here
border: 1px solid black;
}
.container div {
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.container span {
display: block;
}
<div class="container">
<div>left</div>
<div>center<span class="nested child">nested content</span></div>
<div>right</div>
</div>
Wrap your child components inside a <div> and give then class .children with following properties, it will keep your content vertically aligned and horizontally at the same height.
.children{
display: flex;
align-items: flex-start;
}
.container {
display: flex;
flex-flow: row;
align-items: center;
border: 1px solid black;
height:200px;
}
.container div {
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.container span {
display: block;
}
.children{
display: flex;
align-items: flex-start;
}
<div class="container">
<div class=children>
<div>left</div>
<div>center<span class="nested child">nested content</span></div>
<div>right</div>
</div>
</div>
I am creating an Layout for my project and I am working with Flexbox (see image and css style). Well it seems to be working but not for mobile. For example if I resise the screen then the columns will be resize but the right column (Map) is not jumping below the content. How can I do it?
HTML
<div class="container">
<div class="header"><h1>HEADER</h1></div>
<div class="main">
<div class="leftSide">
<div class="menuItem">Menu Item</div>
<div class="secondItem">Content</div>
</div>
<div class="rightSide">
<div class="thirdItem">Map</div>
</div>
</div>
</div>
CSS
// Layout start page
.container {
display: flex;
flex-direction: column;
}
.header{
border: 5px solid yellowgreen;
}
.main{
display: flex;
flex-wrap: wrap;
}
.leftSide{
flex:0 0 65%;
border: 5px solid red;
}
.rightSide{
flex: 1;
border: 5px solid black;
}
.menuItem {
border: 5px solid purple;
}
Add this to your CSS, change the width to whatever you need.
#media (max-width: 600px) {
.main{
display: flex;
flex-wrap: wrap;
flex-direction: column
}
}
Codepen: https://codepen.io/anon/pen/XPmMdQ
I want to center two divs with display: inline-flex; inside a block container, but somehow align-items: center; and justify-content: center; doesn't work. Only text-align: center; works, but it shouldn't be like that (because I've read that with display: inline-flex; it should be align-items and justify-content) I guess? If my solution is correct, then can you tell me what's the difference?
Also, I want to get rid of that little gap between these two centered divs, but I've tried some solutions from the internet and none of them works. Why?
I'd be glad if you guys could help me out with both of my questions.
Here's the code example:
.parent {
border: 1px solid blue;
background-color: yellow;
padding: 10px;
}
.container {
border: 1px dotted green;
padding: 10px;
text-align: center;
}
.child, .child2 {
display: inline-flex;
border: 1px solid red;
background-color: honeydew;
padding: 50px;
}
<div class="parent">
<div class="container">
<div class="child">
<h1> Test1.</h1>
</div>
<div class="child2">
<h1> Test2.</h1>
</div>
</div>
</div>
It will work if you use display: flex on container element. align-items and justify-content position flex items inside flex-container so you need to set display: flex on parent element.
.parent {
border: 1px solid blue;
background-color: yellow;
padding: 10px;
}
.container {
border: 1px dotted green;
padding: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.child,
.child2 {
display: inline-flex;
border: 1px solid red;
background-color: honeydew;
padding: 50px;
}
<div class="parent">
<div class="container">
<div class="child">
<h1> Test1.</h1>
</div>
<div class="child2">
<h1> Test2.</h1>
</div>
</div>
</div>
I have a parent div that must stay at 100% with 3 child divs inside. I need to center the 3 child divs, but don't know how.
.parent {
width: 100%;
border: 1px solid blue;
}
.child {
float: left;
border: 1px solid red;
margin: 2px;
}
<div class="parent">
<div class="child">child1</div>
<div class="child">child2 - center us child divs! :)</div>
<div class="child">child3</div>
<div style="clear: both"></div>
</div>
Here is a JSFIddle:
http://jsfiddle.net/qdHH3/2/
Try using display: inline-block and text-align: center
.parent {
width: 100%;
border: 1px solid blue;
text-align: center;
}
.child {
display: inline-block;
border: 1px solid red;
margin: 2px;
}
jsFiddle: http://jsfiddle.net/qdHH3/3/
Flex solution: set justify-content: center; to the parent element:
.parent {
display: flex;
justify-content: center;
/* align-items: center; /* To align vertically, if needed */
}
.parent, .child { border: 1px solid #000; }
<div class="parent">
<div class="child">child1</div>
<div class="child">child2 - center us child divs! :)</div>
<div class="child">child3</div>
</div>
.child {
$box-size: 100%;
width: $box-size;
height: $box-size;
display: flex;
justify-content: center;
align-items: center;
}