【css】display:flex;弹性盒模型全解

其他 2018-11-01 03:51:06 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/w390058785/article/details/83543198

前言：弹性盒模型的出现使得前端的布局更简单，更快捷，更灵活。（反正很好用就对了）。

一、flex的浏览器内核兼容写法

{ 
    display:-webkit-flex; 
    display:-moz-box;
    display:-mz-flexbox;
    display:flex; 
}

 

二、容器上的六个属性、容器内的子项目上的六个属性

①、容器上的六个属性：

       flex-direction: 决定子项目主轴的方向（默认值为row）

       flex-wrap: 决定子项目是否换行（默认值是不换行nowrap）

       flex-flow: direction wrap的合并写法

       justify-content: 决定子项目(水平)横向布局方式（默认值flex-start）

       align-items: 决定子项目(垂直)纵向布局方式（默认值stretch）

       align-content: 子项目有多列时，决定子项目的纵向布局方式（默认值flex-start）

②、容器内的子项目的六个属性：

       order: 设置子项目的顺序(默认为0)

       flex-grow:  子项目是否可扩大（默认为0，不扩大）

       flex-shrink:   子项目是否可缩小（默认为1，可缩小）（0是false,1是true）

       flex-basis:  设置子项目的初始宽度（默认为auto）

       flex: grow、shrink、basis合并

       align-self: 设置子项目(垂直)纵向方向的位置（默认值stretch）

  

三、容器上的六个属性

①、flex-direction: 决定子项目主轴的方向（默认值为row）

<body>
<style>
    .box { width:100%; height:50px; border:1px solid #000; margin-bottom:20px; 
	   display:-webkit-flex; display:flex; }
    .box div { width:50px; height:50px; line-height:50px; text-align:center; 
		background:#ccc; }
	
    .row { flex-direction:row; } 
    .row-reverse { flex-direction:row-reverse; } 
    .column { flex-direction:column; margin-bottom:100px;} 
    .column-reverse { flex-direction:column-reverse; } 
</style>
<div class="box row">
    <div>1</div><div>2</div>
</div>
<div class="box row-reverse">
    <div>1</div><div>2</div>
</div>
<div class="box column">
    <div>1</div><div>2</div>
</div>
<div class="box column-reverse">
    <div>1</div><div>2</div>
</div>
</body>

 运行结果：

其实很好记，direction的中文意思是"方向"，而row的中文意思是"行"，column的中文意思是"列"，reverse的中文意思是"颠倒"。这样就很容易理解，也很容易记住了。

②、flex-wrap: 决定子项目是否换行（默认值是不换行nowrap）

<body>
<style>
    .box { width:100%; height:100px; border:1px solid #000; margin-bottom:20px; 
           display:-webkit-flex; display:flex; }
    .box div { width:400px; height:50px; line-height:50px; text-align:center; 
	       background:#ccc; }
	
    .nowrap { flex-wrap:nowrap; } 
    .wrap { flex-wrap:wrap; } 
    .wrap-reverse { flex-wrap:wrap-reverse; } 
</style>
<div class="box nowrap">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box wrap">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box wrap-reverse">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
</body>

 运行结果：

同样的wrap的意思是换行，而nowrap的意思是不换行。而wrap-reverse颠倒换行。从运行结果中可看出来，当容器宽度小于容器中子项目的宽度总和的时候，如果设置为nowrap不换行子项目会默认进行宽度缩小。

③、flex-flow: direction wrap的合并写法

flex-flow就不多说了，他就是direction，wrap的合并。

比如

flex-flow:row nowrap; 等价于

flex-direction:row;  flex-wrap:nowrap;

④、决定子项目(水平)横向布局方式（默认值flex-start）

<style>
    .box { width:100%; height:50px; border:1px solid #000; margin-bottom:20px; 
           display:-webkit-flex; display:flex; }
    .box div { width:50px; height:50px; line-height:50px; text-align:center; 
	       background:#ccc; }
	
    .flex-start { justify-content:flex-start;  } 
    .flex-end { justify-content:flex-end; } 
    .center { justify-content:center; } 
    .space-between { justify-content:space-between; }
    .space-around { justify-content:space-around; }
</style>
<div class="box flex-start">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box flex-end">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box center">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box space-between">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box space-around">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
</body>

 运行结果：

从字面意思上去理解记住justify的值会更好， flex-start，flex-end，center就不多说了。space-between就是剩余的空间在子项目中平均分布，space-around就是剩余空间会围绕着子项目平均分布。

⑤、align-items: 决定子项目(垂直)纵向布局方式（默认值stretch）

<body>
<style>
    .box { width:100%; height:100px; border:1px solid #000; margin-bottom:20px; 
           display:-webkit-flex; display:flex; }
    .box div { width:50px; line-height:50px; text-align:center; background:#ccc; }
    .box div:nth-of-type(1) { height:50px; font-size:15px;}
    .box div:nth-of-type(2) { height:60px; font-size:20px;}
    .box div:nth-of-type(3) { height:70px; font-size:26px;}
    .box div:nth-of-type(4) { height:80px; font-size:32px;}
	
    /*stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/
    .stretch { align-items:stretch; } 
    .flex-start { align-items:flex-start;  } 
    .flex-end { align-items:flex-end; } 
    .center { align-items:center; } 
    .baseline { align-items:baseline; }
    /*baseline 项目的第一行文字的基线对齐*/
</style>
<div class="box stretch">
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="box flex-start">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box flex-end">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box center">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box baseline">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
</body>

运行结果：

这里的flex-start，flex-end，center也就不多说了。 重点说下stretch，baseline。stretch是默认值（如果项目未设置高度或设为auto，将占满整个容器的高度。baseline是项目的根据第一行文字的基线对齐。看上图中的第一个跟最后一个就明白了。

⑥、align-content: 子项目有多列时，决定子项目的纵向布局方式（默认值flex-start），align-content要flex-wrap:wrap; 进行换行配合着使用。

<body>
<style>
    .box { width:600px; height:100px; border:1px solid #000; margin-bottom:20px; 
           display:-webkit-flex; display:flex; }
    .box div { width:600px; height:25px; line-height:25px; text-align:center; 
	       background:#ccc; }
	
    .flex-start { align-content:flex-start; flex-wrap:wrap;  } 
    .flex-end { align-content:flex-end; flex-wrap:wrap; } 
    .center { align-content:center; flex-wrap:wrap;} 
    .space-between { align-content:space-between; flex-wrap:wrap;} 
    .space-around { align-content:space-around; flex-wrap:wrap;}  
    .stretch { align-content:stretch; flex-wrap:wrap; } 
</style>
<div class="box flex-start">
    <div>1</div><div>2</div><div>3</div>
</div>
<div class="box flex-end">
    <div>1</div><div>2</div><div>3</div>
</div>
<div class="box center">
    <div>1</div><div>2</div><div>3</div>
</div>
<div class="box space-between">
    <div>1</div><div>2</div><div>3</div>
</div>
<div class="box space-around">
    <div>1</div><div>2</div><div>3</div>
</div>
<div class="box stretch">
    <div>1</div><div>2</div><div>3</div>
</div>
</body>

运行结果：

 align-content的前五个值都是跟justify-content是一样效果，但是align-content:stretch;该值是justify-content没有的。他的效果是剩余空间在子项目的bottom下面进行平均分布。

三、容器内的子项目的六个属性

①、order: 设置子项目的顺序(默认为0)

<body>
<style>
    .box { width:100%; height:100px; border:1px solid #000;  margin-bottom:20px; 
	   display:-webkit-flex; display:flex; }
    .box div { width:50px; height:50px; line-height:50px; text-align:center; 
	       background:#ccc; }

    /*order默认为0*/
    .box div:nth-of-type(1) {  }
    .box div:nth-of-type(2) { order:-1; }
    .box div:nth-of-type(3) { order:-2; }
    .box div:nth-of-type(4) { order:2; }
    .box div:nth-of-type(5) { order:1; }
</style>
<div class="box">
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
</body>

  运行结果： 

  

②、flex-grow:  子项目是否可扩大（默认为0，不扩大）     

<body>
<style>
    .box,.box2,.box3 { width:100%; height:100px; border:1px solid #000;  
             margin-bottom:20px; display:-webkit-flex; display:flex; }
    .box div,.box2 div,.box3 div { width:50px; height:50px; line-height:50px; 
            text-align:center; background:#ccc;  }
    /*默认为0*/
		
    /*等分*/
    .box2 div:nth-of-type(1) { flex-grow:1; }
    .box2 div:nth-of-type(2) { flex-grow:1; }
    .box2 div:nth-of-type(3) { flex-grow:1; }
    .box2 div:nth-of-type(4) { flex-grow:1; }

     /*所有子项目flex-grow值的总和 1+2+3+4=10*/
    .box3 div:nth-of-type(1) { flex-grow:1; }   /*10分之1*/
    .box3 div:nth-of-type(2) { flex-grow:2; }	/*10分之2*/
    .box3 div:nth-of-type(3) { flex-grow:3; }	/*10分之3*/
    .box3 div:nth-of-type(4) { flex-grow:4; }   /*10分之4*/
</style>

<div class="box">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box2">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box3">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
</body>

 运行结果：

 求一个子项目占容器的百分比用 该子项目flex-grow的值/容器所有子项目flex-grow值的总和。

③、flex-shrink:   子项目是否可缩小（默认为1，可缩小）（0是false,1是true）

<body>

<style>
    .box,.box2,.box3 { width:400px; height:100px; border:1px solid #000;  
	margin-bottom:20px; display:-webkit-flex; display:flex; }
    .box div,.box2 div,.box3 div { width:200px; height:50px; line-height:50px; 
	text-align:center; background:#ccc; }
    /*默认为1,为0的不可缩小，值为1可缩小*/		

    .box2 div:nth-of-type(1) { flex-shrink:0; }
    .box2 div:nth-of-type(2) { flex-shrink:0; }
    .box2 div:nth-of-type(3) { flex-shrink:0; }
    .box2 div:nth-of-type(4) { flex-shrink:0; }

    .box3 div:nth-of-type(1) { flex-shrink:1; }
    .box3 div:nth-of-type(2) { flex-shrink:0; }
    .box3 div:nth-of-type(3) { flex-shrink:0; }
    .box3 div:nth-of-type(4) { flex-shrink:1; }
</style>
<div class="box">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box2">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box3">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
</body>

运行结果：

如果没设置换行并且flex-shrink设置为0的话，子项目就不可根据容器缩小了，而且超出部分会撑出到容器外。子项目部分设置flex-shrink:0;的话，那些设置了的也不会进行缩小，当容器小于一定程度后，超出部分也会撑出到容器外。

④、flex-basis:  设置子项目的初始宽度（默认为auto）

<body>
<style>
    .box,.box2{ width:100%; height:100px; border:1px solid #000; margin-bottom:20px; 
	display:-webkit-flex; display:flex; }
    .box div,.box2 div{ width:200px; height:50px; line-height:50px; 
        text-align:center; background:#ccc; }
	
    .box div:nth-of-type(1) { width:400px; }
    .box div:nth-of-type(2) { width:300px; }
    .box div:nth-of-type(3) { flex-basis:auto; }
    .box div:nth-of-type(4) { flex-basis:auto; }

    .box2 div:nth-of-type(1) { flex-basis:400px; }
    .box2 div:nth-of-type(2) { flex-basis:300px; }
    .box2 div:nth-of-type(3) { flex-basis:auto; }
    .box2 div:nth-of-type(4) { flex-basis:auto; }
</style>
<div class="box">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box2">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
</body>

 运行结果： 

basis的默认值为auto，即子项目的本来大小。像上面代码中，给子项目设置width:300px;跟给子项目设置basis:300px;的效果是一样的。

⑤、flex: grow、shrink、basis合并

flex也不多说，就是grow、shrink、basis的合并。

要说的是，flex有两个特殊值:auto、none

{ flex:auto; }
等价于
{ flex-grow:1; flex-shrink:1; flex-basis:auto; }

{ flex:none; }
等价于
{ flex-grow:0; flex-shrink:0; flex-basis:auto; }

  

⑥、align-self: 设置子项目(垂直)纵向方向的位置（默认值auto）

<body>
<style>
    .box { width:100%; height:100px; border:1px solid #000;  margin-bottom:20px; 
	    display:-webkit-flex; display:flex; }
    .box div { width:50px; height:50px; line-height:50px; text-align:center;
               background:#ccc; }

    .box div:nth-of-type(1) { align-self:stretch; }
    .box div:nth-of-type(2) { align-self:flex-start; }
    .box div:nth-of-type(3) { align-self:center; }
    .box div:nth-of-type(4) { align-self:flex-end; }
    .box div:nth-of-type(5) { align-self:baseline; }
</style>
<div class="box row">
    <div>1</div>	
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的align-items属性。slign-self默认值为auto，表示继承容器的align-items属性，如果容器没有设置align-items的值，等同于继承了stretch。（align-items的默认值为stretch）

猜你喜欢

转载自blog.csdn.net/w390058785/article/details/83543198
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022