CSS3 FLEX 弹性盒模型

最新推荐文章于 2024-07-24 21:48:20 发布

桃夭其华710

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量90

点赞数

分类专栏：前端文章标签： css3 css

本文链接：https://blog.csdn.net/lty710/article/details/113076439

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS3 FLEX 弹性盒模型

声明弹性盒子的几种方法

块级弹性盒子：display:flex;
行级弹性盒子：display:inline-flex;
Webkit 内核的浏览器，必须加上-webkit前缀
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
宽度、高度正常设置

改变弹性元素方向容器的属性

默认水平排列
改变内容方向：
- flex-direction:
  - row从左边排列
  - row-reverse从右边排列，反转
  - column从上到下
  - column-reverse从下到上，反转
装不下，元素内容溢出怎么办
- 折下来，换行
- 按行排列
  - flex-wrap
  - nowarp默认不换行
  - wrap换行
  - wrap-reverse第一行在下边，反向折行;
- 按列排列（方向变）
  - 从左往右折flex-wrap:wrap;
  - 反向折同理
- 一起设置排列方向和折行方式
  - flex-flow
  - row wrap行排列折行

轴

主轴、交叉轴（垂直于主轴）
- 行排列：主轴是水平的（默认）
- 列排列：主轴是垂直的
主轴中元素的排列
- 设置内容的对齐方式
- 对齐主轴开始：justify-content
  - flex-star;
  - 主轴结束felx-end;
  - 注意：反转后主轴的开始结束也变方向
  - 所有元素都在中间:center;
  - 平均分布：space-between（eg:三个元素一个紧贴左边一个中间一个紧贴右边）
  - 元素左右两边有等距，所以两个元素间有两倍的间距：space-around;
  - 完全平均：space-evenly;
交叉轴元素排列
- align-items
  - flex-start从交叉轴的起点对齐
  - flex-end;
  - center从交叉轴的中点对齐
  - baseline: 项目的第一行文字的基线对齐
  - stretch;拉伸指定大小的优先级高于拉伸
多行元素在交叉轴的排列方式
- align-content定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
  - lex-start：与交叉轴的起点对齐。
  - flex-end：与交叉轴的终点对齐。
  - center：与交叉轴的中点对齐。
  - space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  - space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  - stretch（默认值）：轴线占满整个交叉轴。
注：对单一元素控制,弹性元素
- 通过选择器
- article:first-child
- nth-child(2)

弹性元素对空间的分配元素的属性

放大比例：
- flex-grow:1;平均分配，占满盒子（可以对所有元素设置，也可以对单一元素设置）
- flex-grow:0;原来多大就多大；
- 加了box-sizing:border-box;这个属性border和padding大小都算在盒子里面了，方便计算
- 计算方法：用剩下的空间/总份数*某一元素的份数
缩小比例：
- 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
- eg:flex-shrink：3;
  width:200px;
- 计算方法:width=200-(200/(2001+2003)*3)*200
主轴的基准尺寸的定义
- 默认值auto
- 优先级：最大/最小>主轴基准尺寸>宽度
- flex-basis:100px;
- max-height
弹性元素组规则和定义
- flex-grow:1;
- flex-shrink:2;
- flex-basis:100px;
- 等价于 flex:1 2 100px;//组合属性
- 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
align-self
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

  .item {
 align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

例子：布局小米移动端页面结构

<style>
   *{
      padding:0;
      margin:0;
   }
   body{
      height:100vh;视口大小
      display:flex;
      flex-direction:column;
      justify-content:space-between;
   }
   header{
      height:60px;
      background:blueviolet;
   }
   main{
      flex-grow:1;中间大小自动延申
      background:#ccc;
   }
   footer{
      height:60px;

   }
</style>

改变元素的顺序

order
数值越小，排列越靠前，默认为0
例子

article section{
    flex:1 0 100px;
    background:blue;
    background-clip:content-box;
    padding:10px;
    text-align:center;
    display:flex;
    flex-direction:column;
}

弹性布局移动端通用菜单

<style>
body{
   height:100vh;视口大小
   display:flex;
   flex-direction:column;
}
main{
   flex:1;
   background:#f3f3f3;
}
footer{
   height:50px;
   background:#eee;
   display:flex;
   flex-direction:row;
   justify-content:space-between;
   border-top:solid 1px #ccc;
}
footer section{
   flex:1;
   border-right:solid 1px #ccc;
   display:flex;
   flex-direction:column-reverse;
}
footer section:last-child{ 
   border-right:none;
}
footer section h4{
   flex:0 0 50px;
   display:flex;
   flex-direction:column;
   justify-content:center;
   text-align:center;
   cursor:pointer;
}
footer section ul{
   display:flex;
   flex-direction:column;
   border:solid 1px #ccc;
   text-align:center;
   margin-bottom:5px;
}
footer section li{
   flex:1 0 50px;
   display:flex;
   flex-direction:column;
   border-bottom:solid 1px #ccc;
   justify-content :center;
   cursor:pointer;
}
</style>
<body>
<main></main>
<footer>
   <section>
   <h4>教程</h4>
   <ul>
      <li>PHP</li>
      <li>CSS</li>
   </ul>
   </section>
   <section>
   <h4>直播</h4>
   <ul>
   <li></li>
   </ul>
   </section>
   <section>
   <h4>软件</h4>
   <ul>
   <li>
   </li>
   </ul>
   </section>
</footer>
</body>

一个标签既可以是弹性元素又可以是弹性容器

使用margin自动撑满空间技巧

桃夭其华710

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 FLEX 弹性盒模型

CSS3 FLEX 弹性盒模型声明弹性盒子的几种方法块级弹性盒子：display:flex;行级弹性盒子：display:inline-flex;Webkit 内核的浏览器，必须加上-webkit前缀注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效宽度、高度正常设置改变弹性元素方向容器的属性默认水平排列改变内容方向：flex-direction:row从左边排列row-reverse从右边排列，反转column从上到下
复制链接

扫一扫