flex布局

最新推荐文章于 2024-05-21 19:43:55 发布

qq_51503697

最新推荐文章于 2024-05-21 19:43:55 发布

阅读量150

点赞数

分类专栏： flex 基本内容

本文链接：https://blog.csdn.net/qq_51503697/article/details/109060972

版权

flex 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

基本内容

1 篇文章 0 订阅

订阅专栏

Flex布局
目标:flex盒子的布局原理；flex布局；flex的常用属性
{display：flex；} （一般用在移动端）
有flex样式
在这里插入图片描述
样式中没有flex样式
布局原理：1.当我们为父盒子设为flex布局以后，子元素的float，clear，vertical-align将无作用 2.通过对父盒子添加flex属性，控制子盒子的位置和排列方式*（父元素叫做容器，子元素叫做项目）
常见的父项属性：flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
1.flex-direction：

row:默认值从左到右（1，2，3）
row-reverse：从右到左（3，2，1）
column:从上到下
column-reverse：从下到上
按列排列display:flex; flex-direction:column;
2.justify-content
flex-start：默认值从头部开始（主轴为X轴，从左到右）（1，2，3）
flex-end：从尾部开始排列（1，2，3）
center：在主轴居中对齐
space-around：平分剩余空间
space-between：先贴两边然后再平分剩余空间（比较重要）div{ width:80%; height:500px; background-color:blue; display:flex; flex-direction:column; justify-content:space-between; }

写在父元素的div中
3.flex-wrap（默认不换行，如果放不开，会减小子元素的宽度，放到父元素里面）
nowrap：不换行
wrap:换行
4.align-items
flex-start：默认值，从上到下
flex-end：从下到上
center：挤在一起居中（垂直居中）
stretch：拉伸（子盒子不要给高度，沿着侧轴拉伸）
5.align-content（用于多行的情况，就是换行的情况下，单行下无效）
flex-start：默认值，从侧轴头部开始排列
flex-end：从侧轴尾部开始排列
center：侧轴中间显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布在两头，在平分剩余空间
stretch:设置子项元素高度平分父元素高度
6.flex-flow
先写主轴方向，在写子元素是否换行flex-flow：column wrap；
常见的子项属性：
flex（子项目占得份数）-弹性布局
align-self（控制子项目自己在侧轴的排列方式）
order（属性定义子项的排列顺序–前后顺序）
1.flex属性（分配子项目剩余空间）
flex：<number> 默认为0


```html
<style type="text/css">
     section{
     	display:flex;
     	height:150px;
     	width:80%;
        background-color: pink;
     }
     section div:nth-child(1) {
     	width:100px;
     	height:150px;
     	background-color: blue;
     }
     section div:nth-child(3) {
     	width:100px;
     	height:150px;
     	background-color: purple;
     }
     section div:nth-child(2) {
     	width:100px;
     	height:150px;
     	background-color: yellow;
     	flex:1;
     }
	</style>

如果想要整个父元素平均分为几等分，那么就不给子元素设置宽度和高度，其余均为剩下宽度
``
2.align-self
flec-end,flex-start等都和上边一样
是写在子元素自己的样式中，不用写在父元素中
3.order
数值越小，排列越靠前，默认值为0（设置的值比默认值小，被设置的元素就去前边）


```html
div span{
		width:70px;
		height:100px;
		background-color:pink;
	}
	div span:nth-child(2){
		order:0;
	}
	</style>
</head>
<body>
	<div>
     <span>2</span>
     <span>5</span>
     <span>7</span>
     </div>
</body>

在正常状态下

div span{
		width:70px;
		height:100px;
		background-color:pink;
	}
	div span:nth-child(2){
		order:-1;
	}
	</style>
</head>
<body>
	<div>
     <span>2</span>
     <span>5</span>
     <span>7</span>
     </div>
</body>

``
在改变order值后，第一个子元素和第二个子元素调换位置
在这里插入图片描述

qq_51503697

关注

0
点赞
踩
0

收藏

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

Felx布局目标:flex盒子的布局原理；flex布局；flex的常用属性{display：flex；} （一般用在移动端）有flex样式样式中没有flex样式布局原理：1.当我们为父盒子设为flex布局以后，子元素的float，clear，vertical-align将无作用 2.通过对父盒子添加flex属性，控制子盒子的位置和排列方式*（父元素叫做容器，子元素叫做项目）常见的父项属性：flex-direction：设置主轴的方向justify-content：设置主轴上的子元素排列方式
复制链接

扫一扫