【CSS】flex布局简介

Composition
335 阅读3分钟

这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战

初识flex布局

01.几个概念

  • flex布局

    即弹性盒子布局，是给父元素添加flex属性，以控制子元素的位置和排列

  • 主轴和侧轴

    主轴：即沿着flex元素排列方向所在的轴

    侧轴：垂直于flex元素排列方向的轴

02.几个属性

（1）父元素的属性

设置再父元素中，控制的是子元素的排列

  • 1.flex-direction:设置主轴方向，设置了其中一个为主轴，则另一个为侧轴

    可以在属性值后面添加reverse进行翻转

    属性值描述
    row水平排列，沿着X轴方向从左到右排列，默认值,
    column垂直排列，沿着Y轴方向从上到下排列
    row-reverse水平排列，沿着X轴方向从右到左排列
    column-reverse垂直排列，沿着Y轴方向从下到上排列

  • 2.justify-content：设置在主轴方向上的子元素的排列方式

    属性值描述
    flex-start沿主轴方向从左到右（从上到下）排列，默认值
    flex-end从主轴方向从右到左（从下到上）排列
    center居中对齐
    space-around平均分配剩余空间
    space-between两端贴边，中间仔平均分配剩余空间

    水平方向：

flex-1.png

垂直方向：

flex-2.png

  • 3.flex-wrap：设置子元素是否换行

    属性值描述
    nowrap不换行，默认值，缩放父元素，同时也会缩放子元素
    wrap设置换行

  • 4.align-items：设置在侧轴方向上的单行子元素的排列方式————仅适用于单行

    属性值描述
    flex-start从头开始
    flex-end从后开始
    center在侧轴上居中对齐
    stretch拉伸（默认值）

    水平方向：

flex-3.png

垂直方向：

flex-4.png

  • 5.align-content：设置在侧轴方向上的多行子元素的排列方式——————适用于多行

    这个属性只有在设置了换行的情况下才使用，且在单行情况下是没有效果的

    即需要搭配flex-wrap:wrap;

    属性值描述
    flex-start
    flex-end
    center
    space-around
    space-between
    stretch

    水平方向：

flex-5.png

垂直方向：

flex-6.png

  • 6.flex-flow：复合属性，同时设置主轴方向和是否换行
  • 语法：
.father {
    /* 首先要给父元素添加flex */
    display: flex;
    
    width: 100%;
    height: 200px;

    /* 父元素中常见的六种属性 */
    /* 1.设置主轴方向 */
    flex-direction: row;

    /* 2.设置在主轴方向上的子元素的排列方式 */
    justify-content: center;
    
    /* 3.设置子元素是否换行 */
    flex-wrap: nowrap;
    
    /* 4.设置在侧轴方向上的单行子元素的排列方式————仅适用于单行 */
    align-items: center;
    
    /* 5.设置在侧轴方向上的多行子元素的排列方式——————适用于多行 */
    align-content: center;
    
    /* 6.复合属性，同时设置主轴方向和是否换行 */
    /* flex-flow: row nowrap; */
}

（2）子元素的属性

属性值描述
flex设置子项元素对剩余空间的分配，每一个子元素项都可单独设置，将所有子元素占的份数加起来，即为占父元素的比例
align-self单独设置子项自己在侧轴上的排列方式，包括flex-start;flex-end;center;stretch;baseline;
orderorder控制子项的排列顺序，越小越靠前,默认值为0
  • 语法：
.son{
     /* 子元素上的属性 */

    /* 1.设置元素对剩余空间的分配份数 */
    /* 即，将所有子元素占的分数加起来，然后占父元素宽度的几分之几 */
    flex: 1;

    /* 2.设置子项自己在侧轴上的排列方式 */
    align-self: center;

    /* 3.order控制子项的排列顺序，越小越靠前，默认为0 */
    order: inherit;
}

本人前端小菜鸡，如有不对请谅解

avatar
文章
阅读
粉丝