【学习笔记-flex布局】

作者：我家小花儿 | 2024-03-14 13:35:11

踩

【学习笔记-flex布局】

flex布局

作用：通过给父元素添加flex属性，来控制子元素的位置和排列。
注意点：
1. 适用于移动端，和高版本的pc端。ie11及以下版本几乎不支持。
2. 父元素设置为flex布局后，子元素的float、clear、vertical-align属性失效。
1
2
3
4

父元素属性

属性	说明
flex-direction	设置主轴方向
justify-content	设置主轴上元素的排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上子元素的排列方式（多行）
align-items	设置侧轴子元素排列方式（单行）
flex-flow	复合属性：相当于flex-direction & flex-wrap

flex-direction属性值
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
justify-content属性值
flex-start 默认值从头开始
flex-end 从尾部开始
center 在主轴居中对齐
space-around 平分剩余空间
space-between 两边贴边，再平分剩余空间
flex-wrap属性值
flex默认不换行，会改变子元素大小，从而可以在一行显示
nowrap: 默认值不换号
wrap：换行
align-content属性值
flex-start 默认值从侧轴头部开始
flex-end 侧轴尾部开始
center 侧轴居中
space-around 沿侧轴平分剩余空间
space-between 沿侧轴先分布在两头再平分剩余空间
stretch 拉伸
align-items属性值
flex-start 默认值从上到下
flex-end 从下到上
center 居中
stretch 拉伸（不能设置子元素高度）
flex-flow属性值
e.g. flex-flow: row wrap

sample:

<style>
  div{
    display: flex;
    width: 300px;
    height: 200px;
    background-color: beige;
    flex-direction: row; /*设置主轴方向*/
    justify-content: center; /*设置主轴上元素的排列方式*/
    flex-wrap: nowrap; /*设置子元素是否换行*/
    align-items: center; /*设置侧轴子元素排列方式（单行）*/
    flex-flow: row wrap;
  }
  div span{
    width: 60px;
    height: 50px;
    margin: 2px;
    background-color: blue;
  }
</style>
<body>
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

子元素常见属性


flex	子元素占的份数
order	子元素的排列顺序（前后顺序）
align-self	控制自元素自身的排列顺序

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/234848