弹性盒子

1. 分类

    display: flex;  块级
    display: inline-flex;  行级 

\color{orange}{注意:} 给父元素设置

2. 排列方式

     flex-direction: row;  (默认值)从左排列
     flex-direction: row-reverse;  从右排列
     flex-direction: column;  从上排列
     flex-direction: column-reverse ;  从下排列

\color{orange}{注意:} 给父元素设置

3. 换行

      flex-wrap: wrap-reverse;换行, 从下往上排列
      flex-wrap:nowrap; 不换行 
      flex-wrap:wrap; 换行 
      flex-wrap:flex;可以根据父元素宽度来改变子元素宽度,不想改变,设置换行

\color{orange}{注意:} 给父元素设置

4. 排列+换行

      flex-flow: row nowrap;  从左排列不换行
      flex-flow: <flex-direction>  <flex-wrap>; 

5. 子元素对齐方式

      justify-content: space-between; 先两边对齐,然后等间距的分布在容器中 
      justify-content: space-around; 先居中对齐,然后等间距的分布在容器中 
      justify-content: space-evenly; 注重间距,先将所有间距等分,再排列
      justify-content: center; 居中
      justify-content: flex-end; 右对齐
      justify-content: flex-start; 左对齐

6. 交叉轴上对齐

       align-items: flex-start; 顶点对齐
       align-items: flex-end;  底部对齐
       align-items:  baseline; 文字顶端对齐
       align-items: center;  中点对齐
       align-items:  stretc; 如果项目未设置高度或设为auto,将占满整个容器的高度。
       效果类似于vertical-align

\color{orange}{注意:} 给父元素设置

7. 子元素属性

7.1 order

定义子元素排列顺序,默认为0
数值越小,排列越靠前(数值可以为负)
order:5;

7.2 flex-grow

1)定义子元素放大倍数,默认为0
2)当所有子元素值为1,即使存在间隙,也不放大,而是等分间隙
3)若一个子元素为2,其他为1,则此子元素比其他元素多放大等分间隙后间隙宽度的一倍

7.3 flex-shrink

1)定义元素缩放比例,默认1
2)可根据父元素的宽度缩放
3)当值为0时,则不根据父元素的宽度改变而缩放

7.4 align-self

给指定元素设置不同的对齐方式
1)auto 继承父元素的对齐方式
2)stretch 元素被拉伸以适应父元素
3)flex-start 元素位于容器的开头
4)center 元素位于容器中间的位置
5)flex-end 元素位于容器的结尾
6)baseline 元素位于容器的基线上

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 分类 给父元素设置 2. 排列方式 给父元素设置 3. 换行 给父元素设置 4. 排列+换行 5. 子元...
    晴空0_0阅读 120评论 0 0
  • 事实上它是一种新类型的盒子模型,也有书上称作弹性伸缩盒布局。比较新的布局方式:旨在提供一个更加有效的方式来布置,对...
    zh_yang阅读 11,404评论 3 14
  • 弹性盒子是CSS3的新布局模式,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。...
    月影追猎者阅读 564评论 0 0
  • 弹性布局定义 CSS3 弹性盒子( Flexible Box) 也叫 弹性布局是一种当页面需要适应不同的屏幕大小以...
    千机墨阅读 1,341评论 0 1
  • 一、弹性盒布局相关词汇1.弹性容器(Flex container)包含着弹性项目的父元素。通过设置 display...
    那麽快樂阅读 997评论 0 3