当前位置： 移动技术网 > IT编程>网页制作>CSS > 伸缩布局

伸缩布局

2019年12月15日  | 移动技术网IT编程  | 我要评论

伸缩布局

参考链接：https://developer.mozilla.org/zh-cn/docs/web/css/flex

以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的div+css布局，现在再到css3的伸缩布局。

css3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

主轴：flex容器的主轴主要用来配置flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

​

使用说明

  1. 指定一个父盒子为伸缩盒子，即指定：display: flex
  2. 明确你需要的主侧轴方向，并设置flex-direction 默认是row ，纵向是column
  3. 设置父盒子的属性来调整子元素的布局，例如align-items
  4. 设置子盒子的宽高或者比例，完成具体的子元素在父盒子中的布局

各个属性介绍

  1. flex-direction调整主轴方向（默认为水平方向）
  2. justify-content调整主轴对齐
  3. align-items调整侧轴对齐（子元素可以使用align-self覆盖）
  4. flex-wrap控制是否换行
  5. align-content堆栈（由flex-wrap产生的独立行）对齐
  6. flex-flow是flex-direction + flex-wrap的简写形式
  7. flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
  8. order控制子项目的排列顺序，正序方式排序，从小到大

写在最后面！！！~~


欢迎欢迎~~~

您可能感兴趣的文章:

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

相关文章:

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