flex布局

小王没网

于 2022-06-29 16:21:24 发布

阅读量75

点赞数

本文链接：https://blog.csdn.net/m0_59550482/article/details/125524272

版权

学习目标

理解Flex布局的作用

理解常用布局父项常见属性

理解常用布局子项常见属性

独立完成京东首页案列

怎么设置flex布局

Flex翻译为“弹性”，通过给元素设置display属性，属性值为flex或者inline-flex。使其变成弹性容器，容器中的直系子元素就会变为弹性元素。

div{

display: flex;//变成弹性盒

}

弹性盒子可以直接控制子元素的位置

布局父项常见属性

flex-direction：设置主轴的方向

justify-content：设置主轴上的子元素排列方式

flex-wrap：设置子元素是否换行

align-content：设置侧轴上的子元素的排列方式（多行）

align-items：设置侧轴上的子元素排列方式（单行）

flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

布局子项常见属性

flex子项目占的份数

align-self控制子项自己在侧轴的排列方式

order属性定义子项的排序顺序（前后顺序）

案例练习:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

flex-direction:设置主轴的方向

justify-content: 设置主轴上的子元素排列方式

flex-wrap:设置子元素是否换行

align-content:设置侧轴上的子元素的排列方式(多行)

align-items:设置侧轴上的子元素排列方式(单行)

flx-flow:复合属性，相当于同时设置了flex-direction 和flex-wrap

/* 默认按照行进行排列，行就是主轴

flex-direction:

row：默认值，元素从左到右依次排列

row-reverse：元素从右到左依次排列

Column: 元素从上到下依次排列

Column-reverse：元素从下到上依次排列

justify-content: 设置主轴元素的排列方式

left

right

flex-start

flex-end

space-around: 空白环绕四周

space-between：空白在子元素中间平均分配

align-content:设置元索在侧轴上的排列方式

center

flex-start

flex-end

space-around: 空白环绕四周

space-between：空白在子元素中间平均分配

fLex-wrap:

nowrap:不换行

wrap:换行

align-items:设置元素在侧轴上的排列方式(单务

center !

flex-start

flex-end

子项上的样式

1、flex: 元素占的份数

2、aling-self: 控制子项自身在侧轴上的排列

3、order: 设置自身的顺序

#box1{

/* width: 400px; */

height: 600px;

background-color: aqua;

display: flex;

flex-wrap: wrap;

flex-direction: row;

justify-content: center;

}

.box2{

width: 100px;

height: 150px;

background-color: red;

margin-top: 10px;

margin-left: 10px;

}

</style>

</head>

<body>

<div id="box1">1

</div>

</body>

</html>

小王没网

关注

0
点赞
踩
0

收藏

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

理解Flex布局的作用理解常用布局父项常见属性理解常用布局子项常见属性独立完成京东首页案列Flex翻译为“弹性”，通过给元素设置display属性，属性值为flex或者inline-flex。使其变成弹性容器，容器中的直系子元素就会变为弹性元素。 ...
复制链接

扫一扫