美文网首页
flex基本了解(伸缩容器)

flex基本了解(伸缩容器)

作者: 基本密码宋 | 来源:发表于2017-09-08 15:11 被阅读16次

伸缩容器的属性

1.display

  • flex 块级伸缩容器
  • inline-flex 行内级伸缩容器

2.flex-direction(方向)

  • row 从左到右的方向
  • row-reverse 相反的方向(从右刀左)
  • column 从上到下的方向
  • column-reverse 从下到方向

3.flex-wrap (伸缩容器在主轴线方向空间不足的情况下,是否换行及其如何换行)

  • wrap 自动换行
  • norap 不管怎样不换行
  • wrop-reverse 自动换行 以反方向换

4.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 以交叉轴结束的位置进行对齐
  • baseline 以基准线对齐
  • stretch 已拉伸的效果展示

7.align-content 换行后在交叉轴上的对齐方式 前提是要开启换行

  • flex-start (起始位置)
  • flex-end (结束位置)
  • center 中间对齐
  • space-between 平均分布在界面上
  • space-around 中间的间距=两边的边距相加
  • stretch 默认值 已拉伸的效果展示
    [传送门 ] (https://github.com/songjiabin/flex/blob/master/flex.html)

相关文章

  • flex基本了解(伸缩容器)

    伸缩容器的属性 1.display flex 块级伸缩容器 inline-flex 行内级伸缩容器 2.flex-...

  • CSS伸缩布局

    伸缩布局(弹性布局) display:flex 给谁添加了display:flex,谁就是伸缩容器 伸缩容器中的盒...

  • flex基本了解(伸缩容器中项目)

    伸缩容器中的项目 1.order项目的排列顺序 数字越小越靠前 默认是0 2.flex-grow 定义伸缩项目的放...

  • CSS阶段五:flex伸缩盒模型,自适应布局

    flex/inlineflex 伸缩盒模型(快速布局利器) 该元素即成为伸缩容器(flex container) ...

  • Flexbox的伸缩属性

    首先需要了解H5中盒子模型的flex-box的属性,其可以分为伸缩容器属性和伸缩Item属性 伸缩容器的属性 1....

  • 28-(flex)伸缩布局/弹性布局

    主轴和侧轴 注意:flex:将一个容器设置为块伸缩容器inline-flex:将一个容器设置为内联 伸缩容器 注意...

  • FlexBox布局属性笔记

    display: 表示为伸缩容器 参考属性: flex |设置为容器 inline-flex| 行内元素设置容器...

  • flex弹性布局

    伸缩容器的属性 display: flex 定义为弹性布局 flex-direction 决定主轴的方向 flex...

  • 17-CSS伸缩布局

    伸缩布局 如何使用伸缩布局?只需要给元素设置 display: flex;属性 伸缩布局分类伸缩容器: 给哪个元素...

  • 微信小程序-flex布局

    伸缩容器 设有display:flex或者display:block的元素就是一个flex Container(伸...

网友评论

      本文标题:flex基本了解(伸缩容器)

      本文链接:https://www.haomeiwen.com/subject/lgigjxtx.html