《HTML5+CSS3 Web开发案例教程》课件-第13章 弹性盒子布局

HTML5+CSS3

2021.6HTML5andCSS3第13章

弹性盒子布局基础概念弹性容器弹性的核心基础DEMO（用flexbox实现Bootstrap的栅格系统）设置对齐方式DEMO（用flexbox创建嵌套的留言布局）第13章

弹性盒子布局

第13章

弹性盒子布局基础概念在使用弹性盒子布局时，通常先将某DOM元素指定为“弹性容器”（flexcontainer），即设置为display:flex（在行内时使用display:inline-flex），然后其内部的一些待布局的元素指定为“弹性项”（flexitem），只有容器的直接子元素是“弹性项”。弹性项总是沿着容器的主轴排列，从主轴的“起始位置”到“结束位置”进行布局。弹性容器有两根轴线：主轴：弹性项沿着容器布局的轴线，默认是水平的，也可设置为垂直的。交叉轴：和主轴垂直的轴线。轴线是有方向的，例如主轴可能从左到右，也可能从右往左。轴线由容器的flex-direction属性控制。第13章

弹性盒子布局基础概念第13章

弹性盒子布局弹性容器使用弹性盒子布局时，首先要指定弹性容器的布局方向。CSS3中提供了flex-direction属性，该属性用于指定主轴的方向，默认值是row，即水平方向且从左到右。flex-direction属性有四个值：属性值说明row默认值，水平方向，从左到右row-reverse水平方向，从右到左column垂直方向，从上到下column-reverse垂直方向，从下到上第13章

弹性盒子布局弹性容器实例：用flexbox设置导航栏。第13章

弹性盒子布局弹性的核心基础弹性三要素flex-grow（放大因子）flex-shrink（缩小因子）flex-basis（弹性项的“自然宽度”）设置换行第13章

弹性盒子布局弹性三要素Flexbox的核心在于它的弹性，即可伸缩性，本质上依赖三个属性flex-grow、flex-shrink和flex-basis，分别表示放大因子、缩小因子和基准大小。这三个属性需要应用在弹性项上，而不是设置在容器上。它们用来改变弹性项的大小，以便更好地填充容器在主轴方向的可用空间。flex-basis表示弹性项的基准宽度，它是计算容器的剩余空间的基础，默认值是auto，即弹性项的“自然宽度”。我们也可以人为地设置一个指定的基准大小，比如总宽度的20%或某个绝对值，例如200px，这个值可以大于也可以小于自然宽度。flex-grow是放大因子。这个值的含义是，当容器的空间大于所有弹性项的基准宽度总和，即当容器按基准宽度容纳了所有弹性项之后，还有剩余空间时，如何处理弹性项的宽度。该值是无单位的，表示在所有的剩余空间中，该弹性项会分配到的空间所占的“份数”。flex-shrink是缩小因子。这个值的含义与放大因子类似，但方向正好相反。当容器宽度小于所有弹性项的基准宽度总和时，“不够”的空间也需要所有弹性项一起分担，那么各个弹性项需要缩小的空间占总共要缩小的空间的“份数”。第13章

弹性盒子布局弹性三要素这三个属性可以简写为一个属性flex，三个值的顺序是flex:<flex-grow><flex-shrink><flex-basis>。flex本身还有几个简写的值，如下：（1）flex:initial，默认值，即flex:01auto，即容器大时不扩张，容器小时等量收缩。（2）flex:auto，表示等量地扩张和收缩，即flex:11auto。（3）flex:none，表示没有弹性，不扩张也不收缩，即flex:00auto。（4）flex:<正整数>，表示flex:<正整数>10。第13章

弹性盒子布局设置换行当弹性项超出容器的边界时，我们可以改变容器的行为，让它换行显示，这种换行行为是通过容器的flex-wrap属性来控制的。容器的flex-wrap属性有三个值：no-wrap：默认值，表示不换行。wrap：换行，且沿着交叉轴从起始位置到结束位置布局。wrap-reverse：换行，且沿着交叉轴从结束位置到起始位置布局。第13章

弹性盒子布局实例：用flexbox实现Bootstrap的栅格系统第13章

弹性盒子布局设置对齐方式设置好容器和内部元素的弹性后，Flexbox可以非常方便地设置弹性项的对齐方式。对齐是分布在两个轴线上的，主轴方向的对齐方式由justify-content属性控制，交叉轴方向的对齐方式由align-items属性控制。这两个属性需要设置在容器上。例如实现水平垂直居中第13章

弹性盒子布局设置对齐方式属性值说明flex-start默认值，靠着主轴的起点对齐flex-end靠着主轴的终点右对齐center主轴的居中位置space-between主轴的两端对齐，即均匀沿着主轴排列，并占满主轴。弹性项之间的间隔都相等，并且是弹性项与容器边框之间没有间隔space-around每个弹性项两侧的间隔相等，弹性项之间的间隔是弹性项与容器边框之间的间隔的2倍属性值说明flex-start靠着交叉轴的起点对齐flex-end靠着交叉轴的终点对齐center交叉轴的中点对齐baseline弹性项第一行文字的基线对齐stretch默认值，如果项目未设置高度或设为auto，将占满整个容器的高度。align-items属性设置值justify-content属性设置值第13章

弹性盒子布局实例：用flexbox设置表单第13章

弹性盒子布局实例：用flexbox