I'm trying to have a variable number of columns evenly spaced, which contain a variable number of child elements vertically centered. I'm almost where I want to, but if I reduce the amount of child elements to one, the vertical alignment fails (row one and five).
What am I doing wrong?
The Code (http://codepen.io/anon/pen/bpvMda):
.myView {
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-around;
height: 500px;
width: 500px;
}
.wpType {
flex: 0 1 auto;
display: flex;
flex-flow: row wrap;
align-items: space-around;
align-content: center;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
}
.wpType:nth-child(even){
background: blue;
}
.wpType:nth-child(odd){
background: red;
}
.wp {
flex: 0 1 auto;
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
background: white;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="myView">
<div class="wpType">
<div class="wp"></div>
</div>
<div class="wpType">
<div class="wp"></div>
<div class="wp"></div>
<div class="wp"></div>
</div>
<div class="wpType">
<div class="wp"></div>
<div class="wp"></div>
<div class="wp"></div>
</div>
<div class="wpType"><div class="wp"></div>
<div class="wp"></div></div>
<div class="wpType"><div class="wp"></div></div>
</div>
Use these properties on your parent div of all of the centered elements.
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
Codepen
Related
How can make child-6 is stretch to half the height of parent?
avoiding the way of splitting 6 items into 2 groups.
I want to stretch child-6 but not working and this makes sense to me because to make a specific item stretch will be stretched the rest space, not half.
.parent {
width: 600px;
margin: 0 auto;
padding: 10px;
height: 300px;
background-color: #eee;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
align-content: space-between;
}
.parent div {
color: #eee;
background-color: rgb(29, 28, 27);
padding: 10px 0;
width: calc(94%/3);
display: flex;
justify-content: center;
}
.parent div.ch6 {
align-self: stretch;
}
<div class="parent">
<div class="ch1">1</div>
<div class="ch2">2</div>
<div class="ch3">3</div>
<div class="ch4">4</div>
<div class="ch5">5</div>
<div class="ch6">6</div>
</div>
Like below:
.parent {
width: 600px;
margin: 0 auto;
padding: 10px;
height: 300px;
background-color: #eee;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
/*align-content: space-between; removed */
}
.parent div {
color: #eee;
background-color: rgb(29, 28, 27);
padding: 10px 0;
width: calc(94%/3);
display: flex;
justify-content: center;
}
.parent div.ch6 {
align-self: stretch;
}
.parent div.ch5,
.parent div.ch4{
align-self: end; /* added */
}
<div class="parent">
<div class="ch1">1</div>
<div class="ch2">2</div>
<div class="ch3">3</div>
<div class="ch4">4</div>
<div class="ch5">5</div>
<div class="ch6">6</div>
</div>
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 2 years ago.
I am using flex-wrap. if textBox are more then width available in container
and in the end there is add button now if things are in single line it's look perfect
but if there are more textBox then width available it shift to next line thats fine but because of that there is too much space left between button and text box
which looks very odd.. i tried many ways but didn't get succeed to place button just next to textBox of 1st line.
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
margin: 5px;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
If you add a rule for the individual flex-lines like justify-content: space-between; Or jsutify-content: space-evenly. It will adjust to whatever number of Elements you add and display them in a more responsive way. See the examples below.
Edit: at the end you can find a 3rd example which uses specific margin-rules instead of flex-rules. I personally dont prefer this but it could look neater in your case.
with space-between
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
margin: 5px;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
with space-evenly
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
margin: 5px;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
margin-rules, commented the css code where i changed it
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
/*new margin-rules*/
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
I am using flexbox to center content with justify-content: center which works as intended but flexbox also moves divs to be side by side which I don't want.
Here is an example
.flex {
display: flex;
justify-content: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>
How can I use flexbox while retaining the default one div on top of the other positioning.
You can set flex-direction: column and then you have to use align-items: center. Default flex-direction is row.
.flex {
display: flex;
align-items: center;
flex-direction: column;
}
.content {
width: 100px;
height 100px;
color: #000;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
<div class="flex">
<div class="content"></div>
<div class="content"></div>
</div>
Try following code,
.flex {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>
Is this scenario doable with flex? Cause I can't text-align:center item2 (full width).
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
</div>
EDIT:
I did change the image cause container color was white (as page background)...
You can make both item1 and item2 as display:flex and make justify-content:center and align-items:center that would center the content on those divs
check the snippet
.container {
display: flex;
}
.container div {
background: black;
color: red;
}
.item1 {
width: 50px;
height: 50px;
align-items: center;
display: flex;
justify-content: center;
}
.item2 {
margin-left: 10px;
width: 100%;
height: 70px;
align-items: center;
display: flex;
justify-content: center;
}
<div class="container">
<div class="item1">text</div>
<div class="item2">text</div>
</div>
hope it helps
Here's an example using flex: grow; for .item1 and .item2
CSS:
.container {
display: flex;
flex-wrap: wrap-reverse;
width: 700px;
background-color: black;
padding:33px;
vertical-align:middle;
}
.item1 {
flex-grow: 1;
background: yellowgreen;
height:200px;
margin: 15px;
text-align: center;
display: flex;
align-items: center;
justify-content: center
}
.item2 {
flex-grow: 2;
background: aquamarine;
height:200px;
margin: 15px;
display: inline-block;
text-align: center;
display: flex;
align-items: center;
justify-content: center
}
HTML
<div class="container">
<div class="item1">text</div>
<div class="item2">text</div>
</div>
JSFiddle
i managed to have vertically aligned column content with flexbox.
However, I need to have headers for the columns as well.
How can i have headers, in which the text is centered to the width of the column and which are at the top of the columns (the content must remain centered vertically)
see my codepen try:
http://codepen.io/anon/pen/QNmrNx
.tothetop{
position: absolute;
top:0;
text-align:center;
background: yellow;
}
put the headers on top, but the width does not match the column width so I can't center the text
If I understand you correctly, you want header text to be center horizontally in respect to columns. This may help you -
header {
display: flex;
justify-content: center;
width: 500px;
margin: auto;
}
.myView {
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-around;
height: 500px;
width: 500px;
}
.wpType {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
}
.wpType:nth-child(even){
background: blue;
}
.wpType:nth-child(odd){
background: red;
}
.wp{
flex: 0 1 auto;
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
background: white;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<header>header</header>
<div class="myView">
<div class="wpType">
<div class="wp"></div>
</div>
<div class="wpType">
<div class="wp"></div>
<div class="wp"></div>
<div class="wp"></div>
</div>
<div class="wpType">
<div class="wp"></div>
<div class="wp"></div>
<div class="wp"></div>
</div>
<div class="wpType"><div class="wp"></div>
<div class="wp"></div></div>
<div class="wpType"><div class="wp"></div></div>
</div>