I would like to create a page with a centred column, in which the individual items do not have a fixed width (see image).
I've tried using flexbox, but that seems to want to fill out the blocks over the entire box. I've also tried to use the normal margin: 0 auto approach, but that doesn't work if you don't have a fixed width.
Is there a way to do this? I prefer pure CSS of course.
Here's an example using a flexbox. No width settings anywhere.
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.element {
background-color: lightblue;
border: thin solid blue;
}
span:not(first-child) {
margin-left: 1rem;
border: thin solid red;
}
<div class="container">
<div class="element">This is text</div>
<div class="element">This is also some text</div>
<div class="element">
<span>And even in different</span>
<span>boxes on the same row</span>
</div>
</div>
Here is an example, hope it will help ^^ :
.parent {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.child {
margin-bottom:20px;
min-width:200px;
min-height:80px;
background-color:#555;
}
.child-fluid {
min-width:100%;
display:flex;
padding:5px;
}
.content {
min-height:80px;
background-color:#AAA;
flex:1;
margin:5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child" style="min-width: 350px;"></div>
<div class="child child-fluid">
<div class="content"></div>
<div class="content"></div>
</div>
<div class="child"></div>
</div>
</body>
</html>
with flex box you have to have a width set on the parent. It doesn't have to be a fixed width though you could do something like
.parent{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
that might work.
Related
I am attempting to divide a set of icons by the year they were created, but I only want the divider line to extend to the edges of the content (the blue squares).
The issue here is that I want this to work regardless of viewport size, as to keep it responsive. How can I make this divider element act the way I am describing?
#parent{
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.child{
height: 250px;
width: 250px;
margin: 10px;
background-color: blue;
}
.divider{
width: 100%;
border-bottom: 2px solid red;
text-align: center;
}
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="divider">2020</div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
You could try wrapping a year into a container and assigning a border-bottom to that container. Due to the containers being direct children of the parent, and not the child anymore, I made changed the main axis of the flex-flow to compensate.
Edit: Included an :after selector to include the year at each border.
#parent {
position: relative;
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.child {
height: 250px;
width: 250px;
margin: 10px;
background-color: blue;
justify-content: space-between;
}
.child-container {
border-bottom: 1px solid red;
}
.child-container:after {
content: '2020';
}
<div id="parent">
<div class="child-container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="child-container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 3 years ago.
.container {
display: flex;
}
.container>div {
border:2px solid red;
padding:15px;
}
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
</div>
I want to align the <div class="two">two</div> in the middle of the page. The first div should still on the left side. How to align the block two in the center?
Can achieve this with the mix of position absolute and flex
.container {
display: flex;
justify-content: center;
position: relative;
}
.container>div {
border:2px solid red;
padding:15px;
}
.one-absolute {
position: absolute;
left: 0;
}
<div class="container">
<div class="one one-absolute">one</div>
<div class="two">two</div>
</div>
You can use css grid to do that
.container{
display: grid;
grid-template-columns: auto auto auto;
}
.container>div {
border:2px solid red;
padding:15px;
width:50px;
}
<div class="container">
<div class="item">one</div>
<div class="item">two</div>
</div>
Thanks for the good question,
we can use two flex properties along with container class.
justify-content:center; and align-items:center;
.container {
display: flex;
justify-content:center;
align-items:center;
background:pink;
min-height:200px;
}
.container>div {
border:2px solid red;
padding:15px;
}
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
</div>
Note: I additionally add min-height:400px; and background:pink; for demonstration. You can remove both of those.
Flex may not be the right solution for this scenario.
Instead CSS positioning could be used to align one div at the center.
But if you still want flex, add a third empty div and hide it.
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
.
.container {
display: flex;
}
.container>div {
border:2px solid red;
padding:15px;
flex: 1;
}
.container>div.three {
opacity: 0;
}
I try to create this little gallery grid with flexbox, but I fail all time.
Is it possible with flexbox?
Here is my example and fiddle.
<div class="gallery">
<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>
<div class="box four">Box 4</div>
<div class="box five">Box 5</div>
</div>
.gallery {
display:flex;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;}
.gallery .box {
background:#ccc;
height:250px;
width:33.33333%;}
.gallery .box.one,
.gallery .box.two {
-webkit-flex:1;
flex: 1;}
.gallery .box.three {
height:500px;}
.gallery .box.four,
.gallery .box.five {
-webkit-flex:1;
flex: 1;}
Ok, so have you tried using flex-direction: column? It requires a slight change in the way you think about flexbox. Try the following:
.gallery {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 200px; // or however you want to do it, required for wrapping
}
.box {
height: 100px;
}
.three {
height: 200px;
}
You can try something like this:
create 3 parent divs .
create two child divs in each 1st and 3rd div with width 100% and height 50%
and flex-direction column.
#grid{
width:100%;
height:500px;
background:#eee;
display:flex;
}
#p1,#p2,#p3{
width:33%;
border:2px solid #fff;
display:flex;
flex-direction:column;
}
#pone,#ptwo,#p31,#p32{
flex-basis:100%;
height:50%;
border:3px solid white;
}
<div id="grid">
<div id="p1">
<div id="pone">
</div>
<div id="ptwo">
</div>
</div>
<div id="p2">
</div>
<div id="p3">
<div id="p31">
</div>
<div id="p32">
</div>
</div>
</div>
I have a container element which has two elements:
A which is col-md-8
B which is col-md-4
C which is col-md-4
Now A is longer so it extends the container element.
I would like C to fill in the rest of the space such that height of A = height of B + height of C (including the margins).
How would I do this in bootstrap?
Try using CSS Flexbox. It will be to tidy to achieve this using bootstrap classes.
Have a look at the snippet below:
.section {
display: flex;
font-size: 30px;
color: #fff;
}
.sec-item {
flex: 1;
}
.left-section {
background: blue;
height: 100vh;
flex: 8;
}
.right-section {
display: flex;
flex-direction: column;
flex: 4;
}
.right-section .top {
background: red;
flex: 1;
}
.right-section .bottom {
background: green;
flex: 1;
}
<div class="section">
<div class="sec-item left-section">A</div>
<div class="sec-item right-section">
<div class="top">B</div>
<div class="bottom">C</div>
</div>
</div>
Hope this helps!
Try something like this. It uses Flex-property
*{
box-sizing:border-box;
}
.row{
display:flex;
flex-direction:row;
}
#leftDiv{
height:400px;
border:2px solid black;
}
#rightDiv{
border:2px solid black;
display:flex;
flex-direction:column;
}
.redOne{
background-color:red;
height:100px;
flex-shrink:0;
}
.greenOne{
background-color:green;
flex-shrink:0;
flex-grow:1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6" id="leftDiv">
</div>
<div class="col-md-6 col-sm-6 col-xs-6" id="rightDiv">
<div class="redOne"></div>
<div class="greenOne"></div>
</div>
</div>
I want some divs to get their width from their content. Display:inline-block does this, but I also want the divs to be under each other, not next to each other as floated.
Using float:left instead of inline-block does this, but I want the divs to be center aligned, not left aligned. How can I do this?
on the parent div put white-space: pre-line;
on the child divs add clear : both
#wrapper{ text-align: center; white-space: pre-line; }
#div1, #div2{
display: inline-block;
clear: both;
border: 1px solid grey;
margin: 3px auto 3px auto;
width: auto;
}
<div id="wrapper">
<div id="div1" class="clearfix">some content here that is bigger</div>
<div id="div2" class="clearfix">some content here</div>
</div>
http://jsfiddle.net/judsonmusic/8HCWp/
Working jsFiddle Demo
Consider the following markup:
<div class="container">
<div class="text">apple</div>
<div class="text">banana</div>
<div class="text">kiwi</div>
<div class="text">orange</div>
</div>
Because you want to align your elements, you must use inline, then we will break
them with :after:
.container {
text-align: center;
}
.text {
background: yellow;
display: inline;
}
.text:after {
content: '';
display: block;
}
As mentioned in this thread, there's also a flex solution to this problem:
#container > p {
border-bottom: 2px solid black;
}
#container {
display: flex;
flex-flow: column;
align-items: flex-start;
}
<div id="container">
<p>A text</p>
<p>A text</p>
<p>A longer text</p>
</div>
html is
<div>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
</div>
and style sheet is
div{
border:1px solid;
padding:10px;
display:inline-block;
}
check demo at http://jsfiddle.net/xupHN/