第9章-弹性盒布局.pptxVIP

第9章弹性盒布局弹性盒布局弹性盒（FlexibleBox）是在CSS3中新增加的一种布局模式，是一种针对用户界面设计而优化的CSS盒子模型，旨在提供一种更加有效的方式来对一个容器中的子元素进行排列对齐，确保页面可以适应不同的屏幕大小。构成：弹性容器，弹性元素特点：可以在任何方向上排布，尺寸可以弹性伸缩。弹性盒的构成弹性元素弹性容器弹性盒由弹性容器和弹性元素构成弹性容器弹性容器弹性容器的设置方法：将父元素的display属性设置为flex或者inline-flex弹性元素的初始特性：元素排列为一行。元素从主轴的起始线开始（主轴和交叉轴的知识将会在下面介绍）。元素不会在主维度方向拉伸，但是可以缩小。在交叉轴方向，元素若不指定高度则会被拉伸。flex-basis属性为auto。flex-warp属性为nowarp。弹性容器属性属性描述flex-direction指定弹性容器中子元素排列方式flex-wrap设置弹性盒子的子元素超出父容器时是否换行flex-flowflex-direction和flex-wrap的简写align-items设置弹性盒子元素在交叉轴方向上的对齐方式align-content修改flex-wrap属性的行为，类似align-items,但不是设置子元素对齐，而是设置行对齐justify-content设置弹性盒子元素在主轴方向上的对齐方式弹性容器属性1：flex-direction作用：指定了弹性元素在弹性容器中的排列方向四种取值：.flex-container{flex-direction:row|row-reverse|column|column-reverse;}row默认值，主轴水平，元素将水平从左到右显示。row-reverse与row相同，但是从右到左显示。column主轴垂直，元素将从上到下显示。column-reverse与column相同，但是从下到上显示。flex-direction四种取值对应的演示图弹性容器属性2：flex-wrap作用：指定弹性盒子的子元素换行方式。三种取值.flex-container{flex-wrap:nowrap|wrap|wrap-reverse;}nowrap-默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。wrap-弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行wrap-reverse-反转wrap排列。弹性容器属性2：flex-wrapnowrap.flex-container{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:nowrap;width:300px;height:250px;background-color:lightgrey;}.flex-item{background-color:cornflowerblue;width:100px;height:100px;margin:10px;}运行结果弹性容器属性2：flex-wrapwrap.flex-container{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;width:300px;height:250px;background-color:lightgrey;}.flex-item{background-color:cornflowerblue;width:100px;height:100px;margin:10px;}运行结果弹性容器属性2：flex-wrapwrap-reverse.flex-container{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap-reverse;width:300px;height:250px;background-color:lightgrey;}.flex-item{background-color:cornflowerblue;width:100px;height:100px;margin:10px;}运行结果弹性容器属性3：flex-flow作用：flex-direction和flex-wrap两个属性的简写。第一个指定的值为flex-direction，第二个指定的值为flex-wrap。弹性容器属性4：