问题
I don't know how to do for the text not enlarges the flex container.
If I fill one box with text when the @media
is @media screen and (min-width:600px)
this box is bigger than 50%. And I want to keep the same percent that when the boxes are empty.
This is the codepen: http://codepen.io/elcollage_com/pen/LpoGVN?editors=110
Thanks.
The example:
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.container {
display:flex;
flex-wrap:wrap;
flex-direction:row;
justify-content:flex-start;
align-items:stretch;
height: 100%;
}
.left {order:2; background:red; flex-basis:100%;}
.middle {order:1; background: green; flex-basis:100%;}
.right {order:3; background:yellow; flex-basis:100%;}
@media screen and (min-width:600px) {
.container {
flex-flow: column wrap;
}
.left {
flex: 1 0 50%;
order: 1;
}
.middle {
flex: 1 0 50%;
order: 3;
}
.right {
flex: 1 0 50%;
order: 2;
}
}
@media screen and (min-width:900px) {
.container {
flex-flow: row nowrap;
}
.left {
flex:1 0 37%;
order:1;
}
.middle {
flex:1 0 21%;
order:2;
}
.right {
flex:1 0 37%;
order:3;
}
}
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
回答1:
If I fill one box with text when the
@media
is@media screen and (min-width:600px)
this box is bigger than 50%. And I want to keep the same percent that when the boxes are empty.
You have flex: 1 0 50%
applied to each flex item in the media query. However, the flex container is changed in the media query to column-direction. Therefore, the 50% flex-basis
in the flex
property refers to height
not width
. And when you add text to each box, the height remains at 50%, but the width increases.
Your code:
@media screen and (min-width:600px) {
.container {
flex-flow: column wrap; /* flex container changed to column direction */
}
.left {
flex: 1 0 50%; /* 50% refers to height not width */
order: 1;
}
.middle {
flex: 1 0 50%;
order: 3;
}
.right {
flex: 1 0 50%;
order: 2;
}
}
So if you want each box to be at 50% width (with or without text), you need to make some adjustments to your code.
Revised code:
.container {
display:flex;
flex-wrap:wrap;
flex-direction:row;
justify-content:flex-start;
align-items:stretch;
height: 100%;
width: 100%; /* new */
}
@media screen and (min-width:600px) {
.container {
flex-flow: column wrap;
}
.left {
flex: 1 0 50%;
order: 1;
width: 50%; /* new */
}
.middle {
flex: 1 0 50%;
order: 3;
width: 50%; /* new */
}
.right {
flex: 1 0 50%;
order: 2;
width: 50%; /* new */
}
}
DEMO
If you have text that overflows a box vertically, you can manage the excess with properties such as overflow and box-sizing.
来源:https://stackoverflow.com/questions/33965883/text-enlarges-the-flexbox-container