阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS Flex 常用布局

      六、flex 布局 弹性布局(属于一维布局),给予容器控制内部元素的宽度、高度的能力。便于实现垂直居中的效果。

      大部分浏览器都能支持,在 webkit 内核的浏览器需要加上 -webkit 前缀。

      容器的 6 个属性:
      flex-direction:row | row-reverse | column | column-reverse;  // 决定主轴的方向
      flex-wrap:nowrap | wrap | wrap-reverse; // 决定项目换行的情况
      justify-content: flex-start | flex-end | center | space-between | space-around; // 项目在主轴的对齐方式
      align-items:  flex-start | flex-end | center | space-between | space-around; // 项目在交叉轴上的对齐方式
      align-content: flex-start | flex-end | center | space-between | space-around | stretch; // 多根轴线的对齐方式,只有一根时则无效
      
      flex-flow: <flex-direction> || <flex-wrap>; //flex-direction 属性和 flex-wrap 属性的简写形式,
      
      项目的 6 个属性:
      flex-start:与交叉轴的起点对齐。
      flex-end:与交叉轴的终点对齐。
      center:与交叉轴的中点对齐。
      space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
      space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
      stretch(默认值):轴线占满整个交叉轴。
      

      https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/

      https://www.miidc.com/news/content50642.html

      https://gitee.com/chendaiming/flex_layout#flex%E5%B8%B8%E7%94%A8%E5%B8%83%E5%B1%80

      项目介绍 flex 简单布局,导入 css 后直接使用

      使用说明 1. 以行布局 .rbox 使用方法:

      <div class="rbox">
          <span>1</span>
          <span>2</span>
          <span>3</span>
      </div>
      

      结果: 0

      1. 以列布局 .cbox 使用方法:

        <div class="cbox">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
        

      结果: 0

      1. 行布局自动换行 .rbox_wrap 使用方法:

        <div class="rbox_wrap">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        </div>
        

      结果: 0

      1. 布局参数 .df_1 ~ .df_9 使用方法:

        <div class="rbox">
        <span class="df_1">1</span>
        <span class="df_1">2</span>
        <span class="df_1">3</span>
        </div>
        <div class="rbox">
        <span class="df_1">1</span>
        <span class="df_2">2</span>
        <span class="df_3">3</span>
        </div>
        

      结果: 0 0

      1. 内容 X 轴布局(左右布局) 使用 rbox: .box_x_center 左右居中 .box_x_start 靠左显示 .box_x_end 靠右显示 使用 cbox: .box_x_center 上下居中 .box_x_start 靠上显示 .box_x_end 靠下显示 使用方法:

        <div class="rbox box_x_center">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
        <div class="cbox box_x_center">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
        

      结果:

      rbox box_x_center
      cbox box_x_center
      
      1. 内容 Y 轴布局 (上下布局) 使用 rbox: .box_y_center 上下居中 .box_y_start 靠上显示 .box_y_end 靠下显示 使用 cbox: .box_y_center 左右居中 .box_y_start 靠左显示 .box_y_end 靠右显示 使用方法:

        <div class="rbox box_y_center">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
        <div class="cbox box_y_center">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
        

      结果: 0 0

      1. 内容 X + Y 轴居中 .box_center 使用方法:

        <div class="rbox box_center">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
        <div class="cbox box_center">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
        

      结果: 0 0

      1. 单个内容布局 (同上) .box_1_center .box_1_start .box_1_end 使用方法:

        <div class="rbox">
        <span>1</span>
        <span class="box_1_center">2</span>
        <span>3</span>
        </div>
        <div class="cbox box_center">
        <span>1</span>
        <span class="box_1_center">2</span>
        <span>3</span>
        </div>
        

      结果: 0 0

      1. 多行内容布局 (配合 rbox_wrap 使用 ,没有添加 cbox_wrap, 不常用,也可直接配合 box_x_xxx 和 box_y_xxx 使用) .box_wrap_center 内容居中 .box_wrap_start 靠左 .box_wrap_end 靠右 .box_wrap_space_a 项目之间的间隔都相等 .box_wrap_space_b 两端对齐,项目之间的间隔都相等 使用方法:

        <div class="rbox_wrap box_wrap_center">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        </div>
        <div class="rbox_wrap box_wrap_space_a">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        </div>
        <div class="rbox_wrap box_wrap_space_a box_center">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        </div>
        <div class="rbox_wrap box_wrap_space_a box_x_end">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        </div>
        

      结果: 0 0 0 0

      1. 项目之间的间隔都相等 .box_space_a
      2. 两端对齐,项目之间的间隔都相等 .box_space_b 最后 内容也可以使用 flex 布局

        <div class="rbox_wrap">
        <span class="rbox box_center">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        </div>
        

      0

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录