Flex 弹性盒子

父元素属性

1.display:flex(定义了一个flex容器)

2. flex-direction(决定主轴的方向)

  • row(默认值,水平从左到右)
  • colunm(垂直从上到下)
  • row-reverse(水平从右到左)
  • column-reverse(垂直从下到上)

3. flex-wrap(定义如何换行)

  • nowrap(默认值,不换行)
  • wrap(换行)
  • wrap-reverse(换行,且颠倒行顺序,第一行在下方)

4.flex-flow(flex-flow属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为row nowrap)

5. justify-content(设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式)

  • flex-start( 默认值、弹性盒子元素将向行起始位置对齐)
  • flex-end(弹性盒子元素将向行结束位置对齐)
  • center(弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐)
  • space-between(弹性盒子元素会平均地分布在行里)
  • space-around(弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半)

6.align-items(设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式)

  • flex-start(弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界)
  • flex-end(弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界)
  • center( 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度))
  • baseline(如弹性盒子元素的行内轴与侧轴为同一条,则该值与flex-start等效。其它情况下,该值将参与基线对齐。)
  • stretch(如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制)

7.align-content(设置或检索弹性盒堆叠伸缩行的对齐方式)

  • flex-start(各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界,之后的每一行都紧靠住前面一行)
  • flex-end(各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界,之后的每一行都紧靠住前面一行)
  • center(各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐,保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一 行之间的距离相等)
  • space-between(各行在弹性盒容器中平均分布。第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界,最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界,剩余的行则 按一定方式在弹性盒窗口中排列,以保持两两之间的空间相等)
  • space-around( 各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。各行会按一定方式在弹性盒容器中排列,以保持两两之间的空间相等,同时第一行前面及最后 一行后面的空间是其他空间的一半)
  • stretch(各行将会伸展以占用剩余的空间。剩余空间被所有行平分,以扩大它们的侧轴尺寸)
子元素上属性

1.order(默认情况下flex order会按照书写顺训呈现,可以通过order属性改变,数值小的在前面,还可以是负数)
2.flex-grow(设置或检索弹性盒的扩展比率,根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间)
3.flex-shrink(设置或检索弹性盒的收缩比率,根据弹性盒子元素所设置的收缩因子作为比率来收缩空间)
4.flex-basis (设置或检索弹性盒伸缩基准值,如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间)
5.flex (flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选)
6.align-self (设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式,可以覆盖父容器align-items的设置)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 这篇文章主要是分享了Flex弹性盒模型的基本概念, 简要介绍了Flex弹性盒模型的发展历程,最后重点介绍了Flex...
    前白阅读 496评论 0 1
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,882评论 0 26
  • 一、Flex布局是什么? Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供...
    唯爱流川枫阅读 23,719评论 0 5
  • 1基本介绍: 任何一个容器都可以指定为 Flex 布局。 .box{display:flex;} 行内元素也可...
    专注_刻意练习阅读 2,015评论 0 3
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,850评论 0 6

友情链接更多精彩内容