弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content

时间:2020-9-6 作者:admin


弹性布局(flex布局、伸缩布局)

一、什么是弹性布局

flexflexible Box 的缩写,意为“弹性布局”,用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局

注:当我们为父盒子设置弹性布局后,子元素的 floatclearvertical-align 属性将失效

.box{
  display: flex;
}
.box{
  display: inline-flex;
}
/*Webkit 内核的浏览器,必须加上-webkit前缀。*/
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

二、布局原理

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。

    <style>
        div{
            display: flex;
            width: 80%;
            height: 300px;
            background-color: green;
            justify-content: space-around;
            align-items: center;
        }
        div span{  
            height: 150px;
            background-color: greenyellow;
            margin-right: 5px;
            flex: 1;
        }
    </style>
</head>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content

flex布局的原理:通过给父盒子添加flex属性,来控制盒子的位置和排列方式

三、父容器常见属性

1. flex-direction 设置主轴方向(即项目的排列方向)

在flex布局中,是分为主轴和交叉轴两个方向

  • 默认主轴方向就是x轴方向,水平向右
  • 默认交叉轴方向就是y轴方向,水平向下

主轴方向是可以通过flex-direction设置的,交叉轴是会跟随主轴排列的。

属性值 说明
row(默认值) 主轴为水平方向,起点在左端(从左到右)
row-reverse 主轴为水平方向,起点在右端(从右到左)
column 主轴为垂直方向,起点在上沿(从上到下)
column-reverse 主轴为垂直方向,起点在下沿(从下到上)

2. justify-content 设置项目在主轴上的排列方式

属性值 说明
flex-start(默认值) 从头部开始(如果x是主轴,则从左到右)
flex-end 从尾部开始排列
center 在主轴居中对齐(如果主轴是x,则水平居中)
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间(最常用)

图示:为了看得更方便加了边框

弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content

3. flex-wrap 设置项目是否换行

默认情况下,项目都排在一条轴线上,flew-wrap属性定义,flex布局中默认是不换行的,如果装不下会缩小子元素的宽度

属性值 说明
nowrap 默认值,不换行
wrap 换行
wrap-reverse 换行,第一行在下方

4. align-items 设置交叉轴上的子元素排列方式

假设交叉轴从上到下;在子项为单行的时候使用

属性值 说明
flex-start(默认值) 交叉轴的起点对齐(从上到下)
flex-end 交叉轴的终点对齐(从下到上)
center 交叉轴的中点对齐(挤在一起居中)
stretch 如果项目未设置高度或设为auto,将占满整个容器的高度(拉伸)
baseline 项目的第一行文字的基线对齐

弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content

5. align-content 设置交叉轴上的子元素排列方式(多行)

设置子项在交叉轴排列方式并且只能用于多行子项(单个项有宽度,一行放不下时,换行:flex-wrap:wrap;),单行子项下是没有效果的

属性值 说明
flex-start(默认值) 在交叉轴的头部开始排列
flex-end 在交叉轴的尾部开始排列
center 在交叉轴中间显示
space-around 子项在交叉轴平分剩余空间
space-between 子项在交叉轴先分部在两头,在平分剩余空间
stretch 设置子项元素高度平分元素高度

弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content

弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content

align-items和align-items区别
  • align-items适用于单行的情况下
  • align-content适用于多行(子项有宽度一行放不下换行时)的情况(单行是无效的)

6. flex-flow 复合属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

.box {
  flex-flow: row wrap;
}

总结

  • flex-direction:设置主轴方向
  • justify-content:设置主轴上的子元素排列方式
  • flex-warp:设置子元素是否换行
  • align-items:设置交叉轴上的子元素的排列方式(单行)
  • align-content:设置交叉轴上的子元素的排列方式(多行)
  • flex-flow:复合属性,flex-direction属性和flex-wrap属性的简写形式

四、子项常见属性

1. flex属性

​ flex属性定义子项分配剩余的空间,用flex来表示占多少份数

弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content

2. align-self属性

​ 控制子项这在侧轴上的排列方式,允许单个项目与其他的项目有不一样的对齐方式。可覆盖align-items属性。

​ 默认值是auto,表示基础父元素的align-items属性,如果没有父元素,则等同于stretch。

3. order属性

​ 数值越小,排列越靠前,默认为0(通过css oder属性调整盒子的位置)

4. flex-grow属性

​ flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

5. flex-shrink

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

6. flex-basis

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。