Flexible Box Model (flexible box model)
in the usual web horizontal layout, or float will be frequently used display: inline-block, but in the adaptive layout of the mobile device using a plurality of different widths, then have to set the percentage considering the width and clearance floating. Flexible Box Model and automatically calculates the width and adaptive, more convenient. Flexible Box Model There are several attributes:
. 1, Box-Orient disposed on a sub-element of the parent element Vertical alignment (vertical) or horizontal (level)
2, Box-Flex disposed on the ratio between the sibling sub-elements, as only one coefficient
3, box-align disposed box arranged in the parent element
4, box-direction setting box direction on a parent element may be disposed reverse ordering contrary
5, box-flex-group set in units of groups fluid coefficients subelements
6, box-ordinal-group in units of groups of sub-element arrangement direction
7, box-pack is provided on a parent element may be disposed vertically and the center
Here are a few examples of flexible box
1, three adaptive layout, and a fixed margin
<style>
* {
margin:0;
padding:0;
}
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
-webkit-box-flex: 1;
margin: 10px;
font-size: 100px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
</style>
<div class="wrap">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
2, when a fixed width, and the remaining two may be assigned different proportions (three layout, a set width, the remaining two ratio of 1: 2 Adaptive):
<style>
*{
margin:0;
padding:0;
}
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
margin: 10px;
font-size: 40px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
</style>
<div class="wrap">
<div class="child w200">200px</div>
<div class="child flex1">比例1</div>
<div class="child flex2">比例2</div>
</div>
3、一个常见的web page 的基本布局：
<style>
*{
margin:0;
padding:0;
}
header, footer, section {
border: 10px solid #333;
font-family: Georgia;
font-size: 40px;
text-align: center;
margin: 10px;
}
#doc {
width: 80%;
min-width: 600px;
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
margin: 0 auto;
}
header,
footer {
min-height: 100px;
-webkit-box-flex: 1;
}
#content {
min-height: 400px;
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
.flex3 {-webkit-box-flex: 3}
</style>
<div id="doc">
<header>Header</header>
<div id="content">
<section class="w200">定宽200</section>
<section class="flex3">比例3</section>
<section class="flex1">比例1</section>
</div>
<footer>Footer</footer>
</div>
更详细的可以查看--->https://www.cnblogs.com/leena/p/6123005.html
和