浅谈“display：flex”属性（弹性盒⼦or弹性布局）——（逆战
班）
flex布局对齐方式⼀、flex简要概念
display:flex 是⼀种布局⽅式。它即可以应⽤于容器中，也可以应⽤于⾏内元素。是W3C提出的⼀种新的⽅案，可以简便、完整、响应式地实现各种页⾯布局。⽬前，它已经得到了所有浏览器的⽀持。
Flex 布局的主要思想是使⽗容器能够调节⼦元素的宽度/⾼度（和排列顺序），从⽽能够最好地填充可⽤空间（主要是为了适应所有类型的显⽰设备和屏幕尺⼨）。flex布容器能够放⼤⼦元素使之尽可能填充可⽤空间，也可以收缩⼦元素使之不溢出
⼆、display：flex 在⽗项添加的属性值
flex-direction：布局的排列⽅向（主轴排列⽅向）
row 默认值，显⽰为⾏。⽅向为当前⽂档⽔平流⽅向，默认情况下是从左往右。（1 2 3 4）
row-reverse 显⽰为⾏。但⽅向和row属性值是反的（4 3 2 1）
column 显⽰为列
column-reverse 显⽰为列。但⽅向和column属性值是反的
flex-wrap :  是否进⾏换⾏处理。
nowrap：默认值，不换⾏处理
wrap：换⾏处理
wrap-reverse：反向换⾏
justify-content：属性决定了主轴⽅向上⼦项的对齐和分布⽅式。
flex-start ：⼦项都去起始位置对齐。(默认值)
flex-end ：⼦项都去结束位置对齐。
center ：⼦项都去中⼼位置对齐。
space-between : 表现为两端对齐。between是两端的意思，意思是多余的空⽩间距只在元素中间区域分配。
space-around : around是环绕的意思，意思是每个flex⼦项两侧都环绕互不⼲扰的等宽的空⽩间距，最终视觉上边缘两侧的空⽩只有中间空⽩宽度⼀半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex⼦项两侧空⽩间距完全相等。              align-items : 每⼀⾏中的⼦元素上下对齐⽅式。
flex-start：默认值
center：⼦项在垂直⽅向的中间位置对齐
flex-end：⼦项在垂直⽅向底端的位置对齐

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