Flex布局 flex布局属性有哪些

yuyutoo 2024-10-25 19:17 6 浏览 0 评论

Flex布局

flex布局原理:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

<!-- 当我们为父盒子设为flex布局以后,子元素的float, clear和vertical-align属性将失效 -->
{
 	display: flex;
}

父元素属性

flex-direction：设置主轴的方向

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

默认主轴方向就是x轴方向，水平向右

默认侧轴方向就是y轴方向，水平向下

flex-direction属性决定主轴的方向（即项目的排列方向）

属性值	说明
row	从左到右（默认值）
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

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

属性值	说明
flex-start	如果主轴是x轴，则从左到右（默认值）
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间（重要）

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

默认情况下,项目都排在一条线(又称”轴线" )上。

属性值	说明
nowrap	默认值,不换行
wrap	换行

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

属性值	说明
flex-start	默认值从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸

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

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

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

<!-- flex-flow属性是flex-direction和flex-wrap属性的复合属性 -->
{
	flex-flow: row wrap;
}

子元素属性

flex：定义子元素占据的份数

{
    flex: <number>   /* default 0 */
}

flex属性可以不仅可以是number，也可以使用百分数，如下图的布局方式

<!-- 有10个元素，设置了flex：20%，就会自动换行，且每行是5个 -->
ul {
    display: flex;
    flex-wrap: wrap;
    li {
        flex: 20%
    }
}

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

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性默认值为auto, 表示继承父元素的align-items属性,如果没有父元素,则等同于stretch.

span:nth-child(2) {
    /*设置自己在侧轴上的排列方式*/
    align-self: flex-end;
}

order: 定义项目的排列顺序

数值越小,排列越靠前,默认为0。注意:和z-index不一样。

flex布局

上一篇：前端基础面试:移动开发，你不得不掌握的Flex 布局，比Grid成熟
下一篇：25、简述弹性盒子 flex 布局及 rem 布局?(必会)

Flex布局 flex布局属性有哪些

Flex布局

父元素属性

子元素属性

相关推荐

取消回复欢迎你发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

其实模版网站在开发工作中很重要，推荐几个参考站给大家

推荐7个模板代码和其他游戏源码下载的网址

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程织梦建站详细步骤

【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)

2024PHP在线客服系统源码+完全开源带详细搭建教程

Flex布局 flex布局属性有哪些

Flex布局

父元素属性

子元素属性

相关推荐

取消回复欢迎 你 发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

其实模版网站在开发工作中很重要，推荐几个参考站给大家

推荐7个模板代码和其他游戏源码下载的网址

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程 织梦建站详细步骤

【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)

2024PHP在线客服系统源码+完全开源 带详细搭建教程

取消回复欢迎你发表评论:

织梦(Dedecms)建站教程织梦建站详细步骤

2024PHP在线客服系统源码+完全开源带详细搭建教程