当前位置： 移动技术网 > IT编程>网页制作>CSS > css之弹性布局

css之弹性布局

2020年07月07日  | 移动技术网IT编程  | 我要评论

弹性布局

弹性布局在移动端可以大胆使用，但在PC端使用，如果要兼容低版本低版本 IE ，则不能使用弹性布局

1、基础概念

采用 Flex 布局的元素，被称为 Flex 容器，他的直接子元素被称为 Flex 项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kgUiFKOp-1594006874098)(C:\Users\LY\Desktop\知了堂学习\第三周\flex.png)]

Flex 设置的属性分为两部分，一部分作用于容器，被称为容器属性，另一部分作用于项目，被称为项目属性

2、容器属性

2-1 定义容器

我是使用 display 属性来定义 flex 布局

.box{
      dispay: flex; 
      display: inline-flex; 
}

2-2定义主轴方向

flex-direction 属性设置主轴方向

.box{flex-direction: row | row-reverse | column | column-reverse }
  • row : 从左到右
  • row-reverse : 从右到左
  • column : 上到下
  • column-reverse : 下的上

2-3 定义内容是否换行

默认情况下， flex 布局 在一排显示，我们可以 设置 flex-wrap 让内容换行

.box{flex-wrap: nowrap | wrap | wrap-reserve }
  • nowrap : 不换行
  • wrap ： 正常换行
  • wrap-reserve : 换行，内容从下到上显示

2-4 flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的简写形式

.box{flex-flow: <`flex-direction`> || <`flex-wrap`> }

2-5 jistify-content

jistify-content 设置主轴方向的内容排列方式以及额外空间的分配方式

.box{justify-content: flex-start | flex-end | center | space-betwwen | space-around | spec-evenly }
  • flex-start
  • flex-end
  • center
  • space-betwwen
  • space-around
  • spec-evenly

2-6 align-items

align-items 设置项目组交叉轴的对齐方式【单行内容】

.box{align-itmes: flex-start | flex-end | center }

2-7 align-content

align-content 设置项目组交叉轴的对齐方式【多行内容】

.box{align-content: flex-start | flex-end | center | space-betwwen | space-around | spec-evenly }

3.项目属性（6种）

3-1 order

在默认情况下，项目在 flex 安装代码书写顺序排列，但是可以通过 order 属性控制项目排列顺序

.item{order: <integer> /* 默认为0 */ }

项目内容以 order 从小到的排列

3-2 flex-grow

flex-grow 设置项目的剩余空间分配比例

.item{flex-grow: <integer> /* 默认为0 */ }

3-3 flex-shrink

flex-shrink 设置项目进行缩放时，当空间不够是，缩小的比例, 0代表不缩放，负值无效

.item{flex-shrink: <integer> /* 默认为1 */ }

3-4 flex-basis

flex-basis 设置在分配剩余空间之前，额外的分配空间

.item{flex-basis: <length> /* 默认为1 */ }

3-5 flex

flex 是 flex-grow 、 flex-shrink 、 flex-basis 三个的简写

3-6 align-self

align-self 设置自身的交叉轴对齐方式

.item{align-self: flex-start | flex-end | center; }

需要注意的属性

  • flex-direction
  • flex-wrap
  • jistify-content
  • align-items
  • align-content
  • order
  • flex & flex-grow
  • align-self

本文地址：https://blog.csdn.net/weixin_42623421/article/details/107153900

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网