CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. (more)
基本设定
1. 设定
<style>
.box{
display: flex; /*使用flexbox*/
}
</style>
<body>
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
</body>
首先要把三个元素装进flexbox中。
2. 基本属性
-
Axes
-
flex-direction属性
- row
- column
- row-reverse
- column-reverse
-
flex-wrap属性
-
flex-flow属性
-
flex-flow: row wrap;
-
-
-
Align
-
align-items属性
- stretch
- flex-start
- flex-end
- center
-
justify-content属性
- flex-start
- flex-end
- center
- space-around
- space-between
- space-evenly
-
