【学习笔记-flex布局】

City__Chen

已于 2023-02-03 14:44:46 修改

阅读量501

点赞数

文章标签： css css3 html

于 2022-12-28 10:51:21 首次发布

本文链接：https://blog.csdn.net/City__Chen/article/details/128465437

版权

flex布局

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

父元素属性

属性	说明
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>