css3--弹性盒⼦布局
弹性盒⼦定义:
弹性盒⼦是 CSS3 的⼀种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是⼀种当页⾯需要适应不同的屏幕⼤⼩以及设备类型时确保元素拥有恰当的⾏为的布局⽅式。引⼊弹性盒布局模型的⽬的是提供⼀种更加有效的⽅式来对⼀个容器中的⼦元素进⾏排列、对齐和分配空⽩空间。
(1)、弹性盒⼦内容
弹性盒⼦由弹性容器(Flex container)和弹性⼦元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了⼀个或多个弹性⼦元素。
注意：弹性容器外及弹性⼦元素内是正常渲染的。弹性盒⼦只定义了弹性⼦元素如何在弹性容器内布局。
弹性⼦元素通常在弹性盒⼦内⼀⾏显⽰。默认情况每个容器只有⼀⾏。
如果我们设置 direction 属性为 rtl (right-to-left)，弹性⼦元素的排列⽅式也会改变，页⾯布局也跟着改变
属性值：
弹性盒⼦（重中之重）
给⽗元素加上 display: flex; 兼容性写法  display: -webkit-flex;
⽗元素中的块元素就会⾃动排列，不⽤加float：left；
给⽗元素添加的属性:
属性⼀：flex-wrap： wrap;  换⾏
flex-wrap 属性⽤于指定弹性盒⼦的⼦元素换⾏⽅式。
各个值解析:
nowrap - 默认，弹性容器为单⾏。该情况下弹性⼦项可能会溢出容器。
wrap - 弹性容器为多⾏。该情况下弹性⼦项溢出的部分会被放置到新⾏，⼦项内部会发⽣断⾏
wrap-reverse -反转 wrap 排列。
属性⼆：flex-direction 属性
flex-direction 属性指定了弹性⼦元素在⽗容器中的位置。
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列⽅式。
row-reverse：反转横向排列（右对齐，从后往前排，最后⼀项排在最前⾯。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后⼀项排在最上⾯。
属性三：justify-content 属性
内容对齐（justify-content）属性应⽤在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐flex-start：
弹性项⽬向⾏头紧挨着填充。这个是默认值。第⼀个弹性项的main-start外边距边线被放置在该⾏的main-start边线，⽽后续弹性项依次平齐摆放。
flex-end：
弹性项⽬向⾏尾紧挨着填充。第⼀个弹性项的main-end外边距边线被放置在该⾏的main-end边线，⽽后续弹性项依次平齐摆放。
center：
css实现三列布局
弹性项⽬居中紧挨着填充。（如果剩余的⾃由空间是负的，则弹性项⽬将在两个⽅向上同时溢出）。
space-between：
弹性项⽬平均分布在该⾏上。如果剩余空间为负或者只有⼀个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和⾏的main-start边线对齐，⽽最后1个弹性项的外边距和⾏的main-end边线对齐，然后剩余的弹性项分布在该⾏上，相邻项⽬的间隔相等。
属性四：align-items 属性
align-items 设置或检索弹性盒⼦元素在侧轴（纵轴）⽅向上的对齐⽅式。
各个值解析:
flex-start：弹性盒⼦元素的侧轴（纵轴）起始位置的边界紧靠住该⾏的侧轴起始边界。
flex-end：弹性盒⼦元素的侧轴（纵轴）起始位置的边界紧靠住该⾏的侧轴结束边界。
center：弹性盒⼦元素在该⾏的侧轴（纵轴）上居中放置。（如果该⾏的尺⼨⼩于弹性盒⼦元素的尺⼨，则会向两个⽅向溢出相同的长度）。
属性五： align-content 属性
align-content 属性⽤于修改 flex-wrap 属性的⾏为。类似于 align-items, 但它不是设置弹性⼦元素的对齐，⽽是设置各个⾏的对齐。
各个值解析:
stretch - 默认。各⾏将会伸展以占⽤剩余的空间。
flex-start - 各⾏向弹性盒容器的起始位置堆叠。
flex-end - 各⾏向弹性盒容器的结束位置堆叠。
center -各⾏向弹性盒容器的中间位置堆叠（垂直）。
space-between -各⾏在弹性盒容器中平均分布。
space-around - 各⾏在弹性盒容器中平均分布，两端保留⼦元素与⼦元素之间间距⼤⼩的⼀半。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。