《Web前端开发基础》课件-9-1弹性盒子

任务flex布局制作页面任课教师：弹性盒子《Web前端基础》课程任务展示2第一部分Knowledge弹性布局什么是弹性布局1Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。它即可以应用于容器中，也可以应用于行内元素。可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。基本概念2采用Flex布局的元素，称为Flex容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称"项目"。容器默认存在两根主轴：水平方向主轴(mainaxis)和垂直方向交叉轴(crossaxis)，默认项目按主轴排列。mainstart/mainend：主轴开始位置/结束位置；crossstart/crossend：交叉轴开始位置/结束位置；mainsize/crosssize：单个项目占据主轴/交叉轴的空间；基本语法3任何一个容器都可以指定为Flex布局。语法如下：对父亲元素设置：display:flex;对子元素设置：flex:份数；

实例常用容器属性及属性含义4（1）flex-direction调整主轴方向（默认为水平方向）基本语法格式row（默认）：主轴水平方向，起点在左端；row-reverse：主轴水平方向，起点在右端；column：主轴垂直方向，起点在上边沿；column-reserve：主轴垂直方向，起点在下边沿。flex-direction:row|row-reverse|column|column-reverse;常用容器属性及属性含义4（2）flex-wrap:定义换行默认的情况下，项目都排列在一条轴上，但有可能一条轴线排不下基本语法格式nowrap默认:不换行wrap：换行，第一行在上方

wrap-reverse:换行，第一行在下方。flex-wrap

:nowrap|wrap|wrap-reverse;常用容器属性及属性含义4（3）flex-flow属性flex-flow属性：flex-direction和flex-wrap的简写，默认rownowrap基本语法格式flex-flow

:<flex-direction>|<flex-wrap>|常用容器属性及属性含义4（4）justify-content调整主轴对齐（水平对齐）基本语法格式flex-start默认值。项目位于容器的开头flex-end项目位于容器的结尾。center项目位于容器的中心。space-between项目位于各行之间留有空白的容器内。space-around项目位于各行之前、之间、之后都留有空白的容器内。justify-content

:flex-start|flex-end|center|space-between|space-around;网上教程：/qingchunshiguang/p/8011103.html常用容器属性及属性含义4（5）align-items属性：定义在交叉轴上的对齐方式基本语法格式flex-start：起点对齐；flex-end：终点对齐；center：中点对齐；baseline：项目的第一行文字的基线对齐；stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。align-items:flex-start|flex-end|center|baseline|stretch;网上教程：/qingchunshiguang/p/8011103.html常用容器属性及属性含义4（6）align-content属性：定义多根轴线上的对齐方式如果项目只有一根轴线，该属性不起作用，所以，容器必须设置flex-wrap属性，项目未设置高度时有意思的是，当你不给项目设置高度但是给容器设置align-content不为stretch时，同一轴线上的项目高度将等于项目中高度最高的项目。基本语法格式flex-start：与交叉轴的起点对齐；flex-end：与交叉轴的终点对齐；center：与交叉轴的中点对齐；space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布；space-around：每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框间隔大一倍。Strech（默认值）:align-content:flex-start|flex-end|space-between|