前端布局 flex布局

一、什么是flex

flex是flecible Box的缩写，意思是“弹性布局”，任何一个容易的可以用flex布局。

当给父盒子设为flex布局之后，子元素的float，clear，和vertical-align属性将会失效

flex操作性方便，布局简单，广泛应用于移动端的开发，pc端页面则仍主要采用传统布局。

二、flex的布局原理

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

三、常见的六个父项属性

1、flex-direction: 设置主轴的方向

属性值	说明
row	设x轴为主轴从左到右
row-reverse	从右到左
column	设y轴为主轴从上到下
column-reverse	从下到上

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

属性值	说明
flex-start	默认值从头开始即主轴是x轴时，从左到右
flex-end	从尾部开始排列
center	居中排列对齐
space-around	平分剩余空间
space-between	先两边贴，再平分剩余空间的部分

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

属性值	说明
wrap	自动换行
nowrap	默认值，不换行

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

注：必须在子项出现换行的情况，即flex-wrap：wrap

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

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

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

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

复合属性语法 flex-flow: row wrap;

四、flex布局子项常见属性

1、flex属性，flex属性定义子元素分配父元素剩余的空间，用flex表示占多少份数

.item{

flex:1

}

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

align-self 属性允许单个项目于其他项目的不同排列方式，可以覆盖align-items属性。默认值为 auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

div span:nth-child(1){

align-self: flex-end;

}

3、order属性，定义项目的排列顺序

项目的默认值为从0开始，数值越小，则可以排得更考前，可以设置为负数

前端布局 flex布局相关推荐

弹性布局(Flex布局)
弹性布局(Flex布局) 文章目录弹性布局(Flex布局) 绪论 Flex布局是什么? Flex布局的基本概念 Flex容器的属性以下六个属性设置在Flex容器上 flex-direction属性 ...
flex布局——flex布局
学习内容: 例如: 体验flex布局 flex布局父项常见属性 justify-content属性 flex-wrap属性 align-items属性 align-content属性 flex-flo ...
CSS弹性盒子布局——flex布局的基本概念
<CSS弹性盒子布局--flex布局的基本概念> Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的子元素之间提供了强大的空间分布和 ...
flex布局 flex布局的主轴对齐方式
认识flex布局 flex布局弹性布局使用flex布局标签之间没有元素之分(块行内行内块) 可以随意设置宽高父元素添加display:flex 弹性容器子元素自动变成弹性盒子(弹性盒子没有 ...
前端学习-flex布局
2020-10-28补充容器上的一些属性: display: flex flex-direction 排列方向 row水平,column垂直 flex-wrap 是否换行 align-items 交 ...
微信小程序最常用的布局——Flex布局
最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: colum ...
HTML/CSS布局—Flex布局(弹性布局)
目的:能够使用Flex布局模型灵活.快速的开发网页 Flex布局/弹性布局: 是一种浏览器提倡的布局模型布局网页更简单.灵活避免浮动脱标的问题作用: 基于 Flex 精确灵活控制块级盒子的布局方 ...
CSS 弹性布局/flex布局最后一行左对齐
设计案例: 左对齐前左对齐后 html: <h1 class="module-title">核心产品</h1> <ul class="co ...
html flex 上中下布局,flex 布局
FlexiableBox即是弹性盒,用来进行弹性布局,一般跟rem(rem伸缩布局(转))连起来用比较方便,flexbox负责处理页面布局,然后rem处理一些flex顾及不到的地方(rem伸缩布局主要 ...
移动端布局——Flex布局
一.Flex布局思考多个盒子横向排列使用什么属性? 浮动设置盒子间的间距使用什么属性? margin 需要注意什么问题? 浮动的盒子脱标 Flex布局/弹性布局:(PC端对低版本浏览器不兼容/移 ...

前端布局 flex布局

前端布局 flex布局相关推荐

最新文章

热门文章