css常用布局-flex自适应布局

最新推荐文章于 2024-05-05 05:25:12 发布

Saga Two

最新推荐文章于 2024-05-05 05:25:12 发布

阅读量7.2k

点赞数

分类专栏： html+css学习笔记

本文链接：https://blog.csdn.net/m0_46309087/article/details/106416147

版权

html+css学习笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、 Flex布局简介

flex布局基于盒状模型，原意为弹性布局，用来为盒状模型提供最大的灵活性。为CSS中display的一个属性；常用于我们常见的分布布局，比如说多个块并列，自适应屏幕宽度等；在移动端应用广泛。目前所有的浏览器都支持flex布局。

二、属性介绍

使用flex的属性能实现大多数盒装平面布局场景，满足大多数的业务需求；功能强大之处在于多种属性的结合。首先得了解基本属性，本篇将基本属性以及相关代码贴出，作为flex入门篇。

1. 轴的概念

声明flex布局的容器，其所有的子元素都成为该容器的成员，由于是盒子模型，我们将这些子元素称为子盒子。在容器的内部存在两根轴线，x、y轴，x轴为水平轴线，y轴为与x轴交叉的交叉轴线。flex的多个属性就是规定子盒子在水平与交叉轴上进行排列。

2. 容器的属性

使用最多的是作用于容器的属性，基本的有如下六个：

flex-direction			//定义了子盒子排列方向
flex-wrap				//定义是否换行
flex-flow				//前两个属性组合
justify-content			//定义子盒子在主轴对齐方式
align-items				//定义子盒子在交叉轴上对齐方式
align-content			//定义多行时对齐方式

2.1 flex-direction属性

定义了子盒子排列方向，有如下基本值：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-direction默认为水平方向：flex-direction：row；如下图所示：
图1 默认水平分布
代码如下：

//html代码
<div class="flex-display">
    <div class="flex-box">1</div>
    <div class="flex-box">2</div>
    <div class="flex-box">3</div>
</div>
//css代码
.flex-display {
    display: flex;
}
.flex-box {
    margin: 10px 20px;
    flex: 1;
    height: 50px;
    width: 35px;
    background-color: red;
    font-size: 15px;
    color: #ffffff;
    text-align: center;
}

width属性此时不会生效，子盒子间margin属性会生效。子盒子宽度由屏幕宽度减去margin宽度后，再进行自适应。
某些特殊情景需要子盒子从右到左排序，此时可用flex-direction: row-reverse;如下图所示：

上图排列的代码如下：

//html代码
<div class="flex-row-reverse">
    <div class="flex-box">1</div>
    <div class="flex-box">2</div>
    <div class="flex-box">3</div>
</div>
//css代码
 .flex-row-reverse{
     display:flex;
     flex-direction: row-reverse;
 }

当需要纵向排列时，容器上定义flex-direction: column;此时若没有定义容器高度，则自己定义的高度属性就会生效，否则会自适应容器高度：
如下未定义容器高度（左）；定义容器高度（300px）（右）：
在这里插入图片描述
代码如下：

//html代码
<div class="flex-column">
    <div class="flex-box">1</div>
    <div class="flex-box">2</div>
    <div class="flex-box">3</div>
</div>
//css代码
.flex-column{
    display:flex;
    flex-direction: column;
    height: 300px;//左边未设该高度属性
}

colomn默认从上到下排列，若设置flex-direction: column-reverse;则子元素为从下到上排列，如图：

2.2 flex-wrap属性

flex-wrap属性定义主轴上子元素的换行方式。flex-wrap有如下几个值：

nowrap：默认值，子盒子在一行上
wrap ：换行，第一行在上方
wrap-reverse：换行，第一行在下方

默认不换行nowrap；此时子元素的宽度属性将由屏幕宽度进行自适应；如下图所示

若值为flex-wrap:wrap ，则子盒子设置的宽度属性就会生效，此时第一行在上方，排不下时自动换行，如下图所示：

上图对应的代码如下：

//html代码
<div class="flex-wrap">
    <div class="flex-box-width-diff">1</div>
    <div class="flex-box-width-diff">2</div>
    <div class="flex-box-width-diff">3</div>
    <div class="flex-box-width-diff">4</div>
    <div class="flex-box-width-diff">5</div>
</div>
//css代码
.flex-wrap{
     display:flex;
     flex-wrap: wrap;
 }
 .flex-box-width-diff{
    margin: 10px 20px;
    height: 50px;
    width: 300px;
    background-color: red;
    font-size: 15px;
    color: #ffffff;
    text-align: center;
}

同样的，换行情况下也可以让第一行从下方开始，设置flex-wrap: wrap-reverse;即可，如下图：

2.3 flex-flow属性

flex-flow是flex-direction和flex-wrap属性的组合，取两个值flex-flow:，默认为 row nowrap。上面两个属性已经包含了其默认值情况，我们看一下非默认值时其布局呈现的方式，如下图，我们设置flex-flow: column wrap;效果如下：

代码如下：

//html代码
 <div class="flex-flow">
    <div class="flex-box-width-diff">1</div>
    <div class="flex-box-width-diff">2</div>
    <div class="flex-box-width-diff">3</div>
    <div class="flex-box-width-diff">4</div>
    <div class="flex-box-width-diff">5</div>
</div>
//css代码
.flex-flow {
    display: flex;
    flex-flow: column wrap;
    height: 200px;
}

该属性由于综合了两个值，对容器的空间分配稍微复杂一些，可以满足特定场景的布局。

2.4 justify-content属性

该属性属于flex布局中最常用的属性，通过设置该属性的值，可实现多种场景的布局；justify-content属性定义了项目在轴线上的对齐方式，有如下几个值：

flex-start：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，每个盒子间距相等，盒子间的间距属性失效
space-around：每个盒子与其他盒子左右边距相等
默认取值flex-start；我们看下非默认取值情况下该属性所呈现的效果；
1、flex-end，在主轴线为水平轴情况下，布局效果如下所示：

图10
代码如下：

//html代码
<div class="flex-end">
    <div class="flex-box2">1</div>
    <div class="flex-box-width-diff">2</div>
    <div class="flex-box2">3</div>
</div>
//css代码
.flex-end {
    display: flex;
    justify-content: flex-end;
}

2、center ，居中，此时计算子盒子宽度，保留盒子间的间距属性值，将子元素居中处理，如下图所示：
图11
代码如下：

//html代码
<div class="flex-center">
    <div class="flex-box2">1</div>
    <div class="flex-box-width-diff">2</div>
    <div class="flex-box2">3</div>
</div>
//css代码
.flex-center {
    display: flex;
    justify-content: center;
}

3、:space-between，两端对齐，每个盒子间距相等，盒子间的间距属性失效，当容器内只有两个子盒子时，将分散于屏幕两端；
图12
由于我设置了两个小盒子margin属性，所以没有紧贴屏幕边缘，此时只有这种margin属性会生效，子盒子间的间距属性不会生效；代码如下：

//html代码
<div class="flex-space-between">
    <div class="flex-box2">1</div>
    <div class="flex-box-width-diff">2</div>
    <div class="flex-box2">3</div>
</div>
//css代码
.flex-space-between {
    display: flex;
    justify-content: space-between;
}
.flex-box2 {
    margin: 10px 20px;
    height: 50px;
    width: 35px;
    background-color: red;
    font-size: 15px;
    color: #ffffff;
    text-align: center;
}

常用的只有两个子盒子，布局效果如下：
图13
我们控制盒子宽度来实现多种场景的应用。
4、space-around：每个盒子与其他盒子左右边距相等，相当于取第一个盒子与屏幕间距，与其他盒子间距为屏幕间距的两倍,此间距通过屏幕间距减去所有盒子宽度属性计算得之。此时我们在容器内子盒子设置的margin属性将失效。效果如下：
图14
代码如下：

//html代码
<div class="flex-space-around">
    <div class="flex-box2">1</div>
    <div class="flex-box-width-diff">2</div>
    <div class="flex-box2">3</div>
</div>
//css代码
.flex-space-around{
    display: flex;
    justify-content: space-around;
}

2.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐，取值如下：

flex-start：左上对齐
flex-end ：左下对齐
center ：中间对齐
stretch：未设高度时占满容器高度
baseline：盒子内第一行文字基线对齐
1、align-items默认值是flex-start，如下图所示（为显示align-items展示效果，将每个子盒子高度设置成不一样）：

上图代码如下：

//html代码
<div class="flex-align-items-start" id="diffHeight">
    <div class="flex-box-h1">1</div>
    <div class="flex-box-h2">2</div>
    <div class="flex-box-h3">3</div>
    <div class="flex-box-h4">4</div>
</div>
//css代码
.flex-align-items-start {
    display: flex;
    align-items: flex-start;
}
#diffHeight div {
    margin: 0 20px;
    width: 35px;
    background-color: red;
    font-size: 15px;
    color: #ffffff;
    text-align: center;
}
.flex-box-h1 {
    height: 40px;
    line-height: 40px;
}
.flex-box-h2 {
    height: 60px;
}
.flex-box-h3 {
    height: 90px;
    line-height: 90px;
}
.flex-box-h4 {
    height: 75px;
}

2、align-items:flex-end 左下对齐，效果如下图：
图16
上图代码如下:

//html代码
<div class="flex-align-items-end " id="diffHeight">
    <div class="flex-box-h1">1</div>
    <div class="flex-box-h2">2</div>
    <div class="flex-box-h3">3</div>
    <div class="flex-box-h4">4</div>
</div>
//css代码
.flex-align-items-end {
    display: flex;
    align-items: flex-end;
}

3、align-items:center 中间对齐，效果图如下：
图17
上图代码如下：

//html代码
<div class="flex-align-items-center" id="diffHeight">
    <div class="flex-box-h1">1</div>
    <div class="flex-box-h2">2</div>
    <div class="flex-box-h3">3</div>
    <div class="flex-box-h4">4</div>
</div>
//css代码
.flex-align-items-center {
    display: flex;
    align-items: center;
}

4、align-items:baseline 盒子内第一行文字基线对齐，若子盒子高度不同，此时要求按照盒子内第一行文字对齐的时候，就可使用该值。效果如下图

图18
上图代码如下：

//html代码
<div class="flex-align-items-baseline" id="diffHeight">
    <div class="flex-box-h1">1</div>
    <div class="flex-box-h2">2</div>
    <div class="flex-box-h3">3</div>
    <div class="flex-box-h4">4</div>
</div>
//css代码
.flex-align-items-baseline {
    display: flex;
    align-items: baseline;
}

5、align-items:stretch 如果盒子未设置高度或设为auto，将占满整个容器的高度，若子盒子设置了高度，则该属性不生效；比如我将第一个盒子高度属性删除时；会呈现以下效果：
图19
此时第三个子盒子撑起了容器的高度，align-items:stretch使得第一个子盒子占满了容器高度；代码如下：

//html代码
<div class="flex-align-items-stretch" id="diffHeight">
    <div class="flex-box-h1">1</div>
    <div class="flex-box-h2">2</div>
    <div class="flex-box-h3">3</div>
    <div class="flex-box-h4">4</div>
</div>
//css代码
.flex-align-items-stretch {
    display: flex;
    align-items: stretch;
}

2.6 align-content属性

align-content属性定义盒子在多条轴上如何对齐（如多行），其基本取值有

flex-start
flex-end
center
space-between
space-around
stretch
1、flex-start：交叉轴起点对齐，效果如下：

上图代码如下：

//html代码
<div class="flex-align-content-start" id="diffwidth">
      <div class="flex-box-w1">1</div>
      <div class="flex-box-w1">2</div>
      <div class="flex-box-w3">3</div>
      <div class="flex-box-w4">4</div>
      <div class="flex-box-w1">5</div>
      <div class="flex-box-w2">6</div>
      <div class="flex-box-w2">7</div>
      <div class="flex-box-w4">8</div>
      <div class="flex-box-w1">9</div>
      <div class="flex-box-w2">10</div>
      <div class="flex-box-w3">11</div>
 </div>
//css代码
.flex-align-content-start {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
#diffwidth {
    height: 300px;
    border: 1px solid red;
}
#diffwidth div {
    margin: 10px 20px;
    height: 50px;
    background-color: red;
    font-size: 15px;
    color: #ffffff;
    text-align: center;
}

多条轴线情况下，必须设置flex-wrap: wrap;才可，不然默认不换行。我们可以看到这种情况下子盒子分布在容器（红框内）的左上方，也就时起点位置。

2、align-content:flex-end 交叉轴终点对齐，如图所示：
图21
更改以上代码的align-content值即可.

3、align-content:center 交叉轴中间对齐，如下图所示：
图22
更改第1部分代码的align-content值即可.
4、align-content:stretch 不设子盒子高度时，占满整个交叉轴。
5、align-content:space-between 交叉轴两端对齐，如图所示：
图23
6、align-content:space-around 交叉轴上子盒子间距相等，如下图所示：
图24
以上为容器的基本属性，通过设置容器的基本属性，基本上能满足大多数的业务场景，但某些时候我们还需要修改某个子盒子的属性，而其他的盒子受影响，此时就需要对子盒子设置单独的属性来满足场景要求。

3. 子盒子属性

在设置父盒子为flex布局的情况下，对于父盒子里面的子盒子，也可添加某些属性以满足我们所需，比如对不同盒子进行不同比例缩小放大、设置不同的对齐方式、子盒子间进行排序等；对应的属性有order、flex-grow、flex-shrink、flex-basis、 flex、align-self。
1、flex-grow，对某个子盒子进行放大；默认为1，当为0时不放大，小于1时为缩小，大于1时放大。如下图所示，我们将盒子设置成统一属性，然后再修改单个子盒子的flex-grow值。
第二个子盒子flex-grow值为2；
图25
代码如下：

//html代码
<div class="flex-display" id="childPty">
    <div class="flex-box">1</div>
    <div class="flex-box-grow">2</div>
    <div class="flex-box">3</div>
</div>
//css代码
#childPty div {
    margin: 0 20px;
    height: 40px;
    background-color: red;
    font-size: 15px;
    color: #ffffff;
    text-align: center;
}

.flex-box-grow {
    flex-grow: 2;
}

当我们不设置时默认为1，此时跟最开始三个盒子没什么差别，当我们设置flex-grow: 0.5;时，我们来看一下效果：
图26
我们会发现第二个盒子缩小了，宽度是其他盒子的一半，

2、flex-shrink 盒子进行缩小，默认为1，当屏幕宽度不足时该属性会生效。不修改该值的情况下，屏幕宽度不足，所有的子盒子将等比例缩小。

3、order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。如图
图27
代码如下:

//html代码
<div class="flex-display" id="childPty">
    <div class="flex-box-order2">1</div>
    <div class="flex-box-order1">2</div>
    <div class="flex-box-order3">3</div>
</div>
//css代码
.flex-box-order1 {
     order: 1;
 }
 
 .flex-box-order2 {
     order: 2;
 }
 
 .flex-box-order3 {
     order: 3;
 }

三、总结

flex布局可满足大多数的布局场景，本篇介绍flex基本的属性，flex布局应用广泛，如应用灵活，则大多数布局不在话下。如本篇有误，欢迎各位道友指出。

Saga Two

关注

0
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
css常用布局-flex自适应布局

一、 Flex布局简介flex布局基于盒状模型，原意为弹性布局，用来为盒状模型提供最大的灵活性。为CSS中display的一个属性；常用于我们常见的分布布局，比如说多个块并列，自适应屏幕宽度等；在移动端应用广泛。目前所有的浏览器都支持flex布局。二、应用...
复制链接

扫一扫