flex布局图文笔记

最新推荐文章于 2024-05-16 18:30:00 发布

lujiebin

最新推荐文章于 2024-05-16 18:30:00 发布

阅读量204

点赞数

分类专栏： CSS 文章标签： css css3 flex

本文链接：https://blog.csdn.net/lujiebin/article/details/105822168

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

认识flex布局

flex布局（Flexible布局，弹性布局）
1.两个重要的概念:

display开启了flex布局的元素叫**flex container**
flex container里面的直接子元素叫做**flex items**

2.设置display属性为flex或者inline-flex可以成为flex container

flex：flex container 以block-level的形式存在
inline-flex：flex container以inline-level形式存在

<html>
   <head>
   	<meta charset="utf-8">
   	<title></title>
   	<style type="text/css">
   		.box{
   			/* 开启flex布局：
   					flex：块级元素
   					inline-flex:行内元素
   			 */
   			display: flex;
   			width: 500px;
   			height: 300px;
   			background-color: aqua;
   		}
   	</style>
   </head>
   <body>
   	<div class="box" id="">
   		<div>
   		</div>
   		<div>
   		</div>
   	</div>
   	<strong>strong元素</strong>
   </body>
</html>

flex布局模型

在这里插入图片描述

flex相关的属性

应用在flex container上的CSS属性

flex-flow

是flex-direction || flex-wrap的简写

.box{
flex-flow:row-reverse wrap
}

flex-direction

flex items 默认都是沿着main axis（主轴）从main start 开始往main end方向排布

<html>
   <head>
   	<meta charset="utf-8">
   	<title></title>
   	<style type="text/css">
   		.box{	
   			/*开启盒子 */
   			display: flex;
   			width: 500px;
   			height: 400px;
   			background-color: aqua;
   		}
   		.item{
   			width: 100px;
   			height: 100px;
   			color: azure;
   			line-height: 100px;
   			text-align: center;
   		}
   		.item1{
   			background-color: hotpink;
   		}
   		.item2{
   			background-color: red;
   		}
   		.item3{
   			background-color: yellow;
   		}
   	</style>
   </head>
   <body>
   	<div class="box" >
   		<div class="item item1">item1</div>
   		<div class="item item2">item2</div>
   		<div class="item item3">item3</div>
   	</div>
   	<strong>strong元素</strong>
   </body>
</html>

在这里插入图片描述

flex-direction默认都是沿着main axis的方向，有四个取值

row（默认值）、row-reverse、column、column-reverse

   		 /* flex-direction:绝对主轴的方向 */
   			/* row:主轴从左到右 */
   			/* row-reverse:反转 主轴从右到左 */
   			/* column:主轴从上到下 */
   			/* row-reverse:反转 主轴从下到上 */
   			.box{
   			flex-direction: row-reverse;
   			}

在这里插入图片描述

flex-wrap

在这里插入图片描述

justify-content

justify-content决定了flex items在main axis上的对齐方式
在这里插入图片描述

align-items
align-content

决定多行的flex items在交叉轴上的对齐方式在这里插入图片描述

应用在flex items上的CSS属性

flex

是flex-grow||flex-shrink||flex-basis的简写，flex属性可以指定1个，2个或3个值

flex-grow
决定了flex items如何扩展
可以设置任意非负数（正整数、正小数、0），默认值是0
当flex container在main axis方向上有剩余size时，flex-grow属性才会生效
如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的size为
flex container的剩余size*flex-grow/sum
如果所有flex items的flex-grow总和不超过1，每个flex items扩展的size为
flex container的剩余size*flex-grow
flex items扩展后的最终size不能超过max-width\max-height
flex-basis

用来设置flex items在main axis 方向上的base size
auto（默认值）、具体的宽度数值（100px）

决定flex items最终base size的因素，从优先级高到低

max-width\max-height\min-width\min-height
flex-basis
width\height
内容本身的size
flex-shrink

决定了flex items如何收缩

可以设置任意非负数字（正整数、负整数、0），默认值是1
当flex items在main axis方向上超过了flex container的size，flex-shrink属性才会生效

如果所有flex items的flex-shrink总和超过1，每个flex item收缩的size为

flex items超出flex container的size*收缩比例/所有flex items收缩比例之和

如果所有flex items的flex-shrink总和sum不超过1，每个flex item收缩的size为

flex items超出flex container的sizesum收缩比例/所有flex items的收缩比例之和
收缩比例=flex-shrink*flex item的base size
base size就是flex item放入flex container之前的size

flex items收缩后的最终size不能小于min-width\min-height

order
决定了flex items的排序顺序，可以设置任意整数（正整数、负整数、0），值越小就越排在前面，默认值是0
align-self
flex可以通过align-self覆盖flex container设置的align-items
auto（默认值）：遵从flex container的align-items设置
strectch、flex-start、flex-end、center、baseline，效果跟align-items一致

lujiebin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flex布局图文笔记

认识flex布局flex布局（Flexible布局，弹性布局）1.两个重要的概念:开启了flex布局的元素叫flex containerflex container里面的直接子元素叫做flex items2.设置display属性为flex或者inline-flex可以成为flex containerflex：flex container 以block-level的形式存在in...
复制链接

扫一扫