Flex布局轻松上手

最新推荐文章于 2022-07-27 15:38:32 发布

番茄红了

最新推荐文章于 2022-07-27 15:38:32 发布

阅读量1.6k

点赞数 26

分类专栏：前端小知识

本文链接：https://blog.csdn.net/weixin_41851906/article/details/106570126

版权

前端小知识专栏收录该内容

6 篇文章 3 订阅

订阅专栏

布局原理

弹性布局，任何一个容器都可以指定为flex布局，为盒状模型提供最大的灵活性。
父盒子添加flex属性，子盒子中的float,clear,veritcal-align属性失效，子容器可以横向/竖向排列
采用flec布局的元素成为flex元素(flex container）–容器。子元素自动成为容器成员，成为flex项目

父项属性

属性	属性说明
flex-direction	设置主轴方向
justify-content	主轴上子元素的排列方式
flex-wrap	子元素是否换行
align-content	侧轴上的子元素排列方式-多行
align-items	侧轴上子元素排列方式-单行
flex-flow	flex-direction+flex-wrap

主轴与侧轴

带入我们常说的x轴y轴即可
默认主轴的方向是x轴方向（横向），同理，侧轴默认为y轴（竖向）。主轴和侧轴可以通过flex-direction更改
在这里插入图片描述

flex-direction–设置主轴方向

主轴和侧轴会发生变化，flex-direction设置的是主轴，另外一项自动归为侧轴，子元素跟随主轴排列

属性	说明
row	左–右
row-reverse	右–左
column	上–下
column-reverse	下–上

总的来说就是横竖及反转。
示例

默认主轴效果：
row-reverse：
column:
column-reverse:
代码:

依次替换flex-direction属性即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 步骤：
        1.父盒子设置flex属性
        2.在父盒子上添加设置主轴方向即可 */
        div{
            /* 1.设置父盒子的flex属性 */
            display: flex ;
            width: 700px;
            height: 200px;
            background-color: cadetblue;
            /* 2.选择父盒子的主轴方向 */
            /* 右到左 */
            flex-direction:row-reverse;  
            /* 竖向 */
            flex-direction: column; 
            /* 下到上 */
            flex-direction: column-reverse;

        }
       div span{
            width:100px;
            height: 100px;
            background-color: papayawhip;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</body>
</html>

justify-content–主轴上的子元素排列

属性	说明
flex-start	头部开始
flex-end	尾部开始
center	主轴居中
space-around	平分剩余空间
space-between	贴两侧后平分剩余空间

示例

lex-start:：
flex-end：
center:
spece-around:
space-between:

flex-wrap–子元素是否换行

指定flex元素单行显示还是多行显示。允许换行，该属性允许控制行的堆叠方向，默认不换行

属性	说明
nowrap	默认值，不换行
wrap	换行

为什么会出现子元素换行？
传统布局中。父盒子800px,一个子盒子300px,有3个盒子。此时子元素就会出现换行的情况，flex布局中，默认子元素不换行。父盒子装不开则缩小子元素的宽度
示例
在这里插入图片描述
可以看出，再不换行的情况下，添加子元素，原有子元素会缩小以适应

align-items–侧轴-单

属性	说明
flex-start	上–下
flex-end	下–上
center	垂直居中
stretch	拉伸

示例

flex-start
flex-end
flex-center
stretch
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
        div{
            margin-top: 500px;
            display: flex ;
            width: 700px;
            height: 200px;
            background-color: cadetblue;
            /* 1.先水平居中 */
            justify-content:center;
            /* 2.再垂直居中 */
            align-items: center;

        }
       div span{
            width:200px;
            height: 100px;
            margin: 10px;
            background-color: papayawhip;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>

    </div>

</body>
</html>

align-items–侧轴-多

align-content适用于换行情况

属性	说明
flex-start	上–下
flex-end	下–上
center	垂直居中
stretch	拉伸
space-around	先侧轴两头在平分剩余空间
space-around	侧轴平分剩余空间

示例

space-around:
2.space-between:
其余属性一致，不展示啦

flex-flow

flex-flow≈flex-direction+flex-wrap，相当于同时设置了flex-direction和flex-wrap属性。
认证一下，没有丝毫的变化
在这里插入图片描述

子项属性

align-self

允许单个项目与其他项目不一样的对齐方式，可以覆盖flex-items属性，默认值为auto表示继承父元素的align-items属性，没有父元素等同于stretch

.item{
align-self:flex-end|flex-start|flex-end|center|baseline|stretch

在这里插入图片描述
align-self和名字一样，管好它自己self

order

定义项目的排列顺序
与z-index相反，order数值越小，排列越靠前在这里插入图片描述

.item{
order:<integer>；
}

      div span:nth-child(1){
            background-color:chocolate;
            order: -1;
        }
        div span:nth-child(2){
            background-color: cornflowerblue;
            order: -3;
        }
        div span:nth-last-child(1){
        order: 0;
        }
    </style>
</head>

<body>
    <div>
        <span>-1</span>
        <span>-3</span>
        <span>1</span>
    </div>

</body>

flex

flex属性是flex-grow,flex-shrink,flex-basis的简写，默认值为0,1，auto。指明子项目占的份数
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
        div{
            margin-top: 500px;
            display: flex ;
            width: 700px;
            height: 200px;
            background-color: cadetblue;


        }
       div span{
          
           height: 50px;
            margin: 10px;
            background-color: papayawhip;
        }
  
        div span:nth-child(1){
            background-color:chocolate;
            flex-grow: 1;
        }
        div span:nth-child(2){
            background-color: cornflowerblue;
           
            flex-grow: 3;
        }
        div span:nth-last-child(1){
            flex-grow: 1;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</body>
</html>

flex-grow

定义项目的放大比例，默认是0，在0的情况下，存在剩余空间也不会放大

.item{
	flex-grow:<number>;
}

flex-shrink

定义项目缩小比例，默认为1，空间不足的情况下，此项目将缩小.如果所以项目的属性都为1，则等比例缩小，属性为0时不缩小

.item{
	flex-shirk:<number>;
}

flex-basis

在分配多余空间之前，项目占据主轴空间，默认值是auto

.item{
	flex-basis:<length>;
}

番茄红了

关注

26
点赞
踩
12

收藏

觉得还不错? 一键收藏
25
评论
Flex布局轻松上手

目录布局原理父项属性主轴与侧轴flex-direction--设置主轴方向justify-content--主轴上的子元素排列flex-wrap--子元素是否换行align-items--侧轴-单align-items--侧轴-多flex-flow子项属性align-selforderflexflex-growflex-shrinkflex-basis布局原理弹性布局，任何一个容器都可以指定为flex布局，为盒状模型提供最大的灵活性。父盒子添加flex属性，子盒子中的float,clear,veri
复制链接

扫一扫

专栏目录