1000字范文 > flex布局（flex容器 flex属性）

flex布局（flex容器 flex属性）

时间：2022-02-18 04:36:07

文章目录

前言一、flex（Flexible Box）概述二、flex容器，flex属性1.flexBox弹性模型2.基本概念详解3.弹性容器的属性4.弹性元素的属性5.圣杯布局6.垂直居中对齐总结(以图片的形式呈现)

前言

本篇文章中主要归纳flex布局弹性元素的属性和弹性容器的属性，以及使用flex布局制作导航栏。

一、flex（Flexible Box）概述

1.概述：Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。

2.1 任何一个容器都可以指定为flex布局。

.box{display:flex;}

2.2 内元素也可以使用Flex布局；

.box{display:inline-flex}

2.3 webkit内核的浏览器，必须加上webkit前缀。

.box{display:webkit-flex;display:flex;}

注意：设为Flex布局以后，子元素的float，clear和vertical-align属性将失效。

二、flex容器，flex属性

1.flexBox弹性模型

采用Flex布局的元素，称为flex容器，简称“容器”。它的子元素自动成为容器成员，称为flex项目，简称“项目”。

2.基本概念详解

弹性容器：给元素添加display:flex后就是弹性容器。弹性属性：弹性容器中的所有子元素称为<弹性元素>,弹性元素永远沿主轴排列。

注意点：1.每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。水平的不一定就是主轴。
2.每根轴都是起点和终点，这对于元素的对齐非常重要。
3.弹性元素也可以通过display:flex设置为另一个弹性容器。形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
4.弹性元素的两根轴非常重要，所有属性都是作用于轴的。

3.弹性容器的属性

flex-direction属性：属性值决定主轴的方向。（弹性元素永远沿主轴排列）

//css设置.box{/* display: -webkit-box; */display: flex;flex-direction: row;width:600px;height: 300px;background-color: pink;}

flex-wrap属性：默认情况下，项目都排在一条线上，此属性的定义，如果一条轴线排不下，如何换行？nowrap:不换行，元素自动压缩，wrap:换行，向下换行，wrap-reverse:换行，向上换行。

.box{display: flex;flex-direction: row;width:100px; height: 300px;background-color: pink;flex-wrap: wrap-reverse;}

3.flex-flow属性：flex-direction属性和flex-wrap属性的简写形式，默认为row，nowrap。

4.justify-content属性：定义了项目在主轴上的对齐方式；默认值为 flex-start。

5.align-items属性：定义项目在交叉轴上如何对齐。默认值是stretch,当元素设置具体尺寸或者auto时会将交叉轴方向撑满（撑满整个容器）。

6.align-content属性：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。也是在交叉轴上如何对齐。

注意：align-items和align-content的区别：（1）两者“作用域不同”；（2）align-content管全局（所有行视为整体）（3）align-items管单行。

4.弹性元素的属性

5.圣杯布局

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.demo{display: flex;flex-direction: column; text-align: center;}.demo div{flex: 1;}.body{display: flex; } .header,.footer,.left,.right{flex: 0 0 20%!important;}.header,.footer{background-color: dimgray;}.left{background-color: lightgray;}.center{background-color: greenyellow;}.right{background-color: lightpink;}.left,.center,.right{height: 300px;}.header{height: 100px;}</style></head><body><div class="demo"><div class="header">头部</div><div class="body"><div class="left">left</div><div class="center">center</div><div class="right">right</div></div><div class="footer">底部</div></div></body></html>

6.垂直居中对齐

<style>.demo{width: 500px;height: 300px;border: 1px solid purple;display: flex;/*设置为flex布局*/justify-content: center; /*水平居中*/align-items: center;/*垂直居中*/}.inner{width: 160px;height: 160px;font-size: 26px;border: 1px solid red;}</style></head><body><div class="demo"><div class="inner"><p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p></div></div></body>