flex布局语法以及实操,一文带你吃透flex布局的基础

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

目录

前言

一、Flex是什么?

二、Flex语法知识

1.轴的使用

1.1flex-direction属性

​编辑

2.基础知识

2.1justify-content属性

2.1.1justify-content: flex-end;

2.1.2 justify-content: space-around;

2.1.3justify-content: center;

2.1.4 justify-content: space-between;

2.1.4justify-content: space-evenly;

2.2.align-items属性

2.2.1 align-items: center;

2.2.2 align-items: flex-start;

2.2.3 align-items: flex-end;

2.3  flex-wrap属性

2.4 flex属性

三、总结


前言

        Flex弹性布局已是目前最为流行的布局方式之一,它给Web开发者在完成页面或组件的UI布局带来了极大的灵活性和便利性。

一、Flex是什么?

        Flex弹性布局其实就是将我们的盒子默认的分为一个主轴和一个侧轴(交叉轴),只需要用display:flex 便可以通过主轴和侧轴交叉的方式进行布局。下面我将用实例来具体说明

flex布局语法以及实操,一文带你吃透flex布局的基础_第1张图片

二、Flex语法知识

1.轴的使用

1.1flex-direction属性

 flex-direction决定主轴的方向:

.box {
  flex-direction: row 默认方向  (常用)
                  row-reverse 主轴为水平方向,由右向左
                  column  主轴为垂直方向,由上到下 (偶尔常用)
                  column-reverse;主轴为垂直方向,由下到上
}

flex布局语法以及实操,一文带你吃透flex布局的基础_第2张图片

如图为主轴默认时我们用flex布局的样子 方便大家更容易理解。

flex布局语法以及实操,一文带你吃透flex布局的基础_第3张图片

如图为主轴垂直 由上到下

2.基础知识

2.1justify-content属性

justify-content属性定义了项目在主轴上的对齐方式,具体属性如下。

.box{
     display:flex;
     justify-content:flex-start;左对齐(默认)
                     flex-end;右对齐
                     center;居中
                     space-around;每项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍。
                     space-between;两端对齐,项目之间的间隔都相等。
                     space-evenly;每个间隔都一样
}

2.1.1justify-content: flex-end;

flex布局语法以及实操,一文带你吃透flex布局的基础_第4张图片

2.1.2 justify-content: space-around;

flex布局语法以及实操,一文带你吃透flex布局的基础_第5张图片

2.1.3justify-content: center;

flex布局语法以及实操,一文带你吃透flex布局的基础_第6张图片

2.1.4 justify-content: space-between;

flex布局语法以及实操,一文带你吃透flex布局的基础_第7张图片

2.1.4justify-content: space-evenly;

flex布局语法以及实操,一文带你吃透flex布局的基础_第8张图片

2.2.align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box{
    align-items:flex-start:交叉轴的起点对齐。
                flex-end:交叉轴的终点对齐。
                center:交叉轴的中点对齐。
                baseline: 项目的第一行文字的基线对齐。
                stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

}

2.2.1 align-items: center;

flex布局语法以及实操,一文带你吃透flex布局的基础_第9张图片

2.2.2 align-items: flex-start;

flex布局语法以及实操,一文带你吃透flex布局的基础_第10张图片 2.2.3 align-items: flex-end;

flex布局语法以及实操,一文带你吃透flex布局的基础_第11张图片

2.3  flex-wrap属性

flex-wrap属性是指定弹性容器中的项目(flex item)在一行上不足以容纳时是否换行的规则。该属性接受三个值:

  1. nowrap(默认值):项目不换行,尽可能在一行内显示,会导致项目溢出父容器。
  2. wrap:项目自动换行,当一行放不下时,会自动换到下一行显示。
  3. wrap-reverse:项目自动换行,但是以反向顺序排列

2.4 flex属性

        flex属性,它是flex容器(flex container)中子项目(flex item)的扩展和收缩比例,用于控制子元素在主轴上的排列方式。flex属性是一个复合属性,包含三个子属性:flex-grow、flex-shrink 和 flex-basis。

  • flex-grow属性:指定项目在剩余空间中所占比例,默认值为0,表示不放大。
  • flex-shrink属性:指定如果空间不足,项目在缩小时所占比例,默认值为1,表示缩小。
  • flex-basis属性:定义项目在主轴方向上的初始大小,默认是auto,即按照元素自身的宽度或高度来进行计算

如图是俩个默认大小的盒子:flex: 0 1 auto;

flex布局语法以及实操,一文带你吃透flex布局的基础_第12张图片

当让一个盒子攒满空间时:flex: 1 1 auto;

flex布局语法以及实操,一文带你吃透flex布局的基础_第13张图片


三、总结

以上就是今天要讲的内容,本文仅仅简单介绍了Flex布局的使用,而Flex的功能还不止于此,如果大家还想了解更多的前端知识和flex布局的相关内容,可以到MDN上面去了解更多的知识,学无止尽。

你可能感兴趣的:(前端案例,javascript,开发语言,ecmascript,flex,css,前端)