移动端布局——flex布局

flex布局

flex布局原理

  • flex是flexible Box的缩写意为弹性布局,任何一个容器都可以指定flex布局。
  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
  • 采用flex布局的元素成为flex容器他所有的子元素自动成为容器成员flex项目。

flex父项常见属性

  • flex-direction 设置主轴方向
  • justify-content 设置主轴上元素的排列方式
  • flex-wrap 设置元素是否换行
  • align-item 设置子元素在侧轴上排列顺序(单行)
  • align-content 设置子元素在侧轴上排列顺序(多行)

flex-direction

默认主轴X轴水平向右 y轴垂直向下

属性值 描述
row 默认从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

justify-content

属性值 描述
flex-start 默认从头部开始如果主轴是x轴则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐
space-between 平分剩余空间
space-around 先两头对齐,在平分剩余空间

注意:使用属性之前先确定好主轴是x还是y

flex-wrap

默认子元素不换行,装不开子元素会缩小子元素的大小放到父元素内。

属性值 描述
nowrap 默认不换行 (大小可能会改变)
wrap 换行

align-items 设置侧轴上子元素的排列方式(单行)

属性值 描述
flex-start 从头部开始
flex-end 从尾部开始
center 居中显示
stretch 拉伸 (不设置高度,高度由父盒子决定)

align-content 设置侧轴上的子元素的排列方式(多行)

属性值 描述
flex-start 在侧轴的头部开始排列
flex-end 从侧轴尾部开始排列
center 在侧轴中间显示
space-between 子元素在侧轴平分剩余空间
space-around 子元素在侧轴先两头对齐,在平分剩余空间
stretch 拉伸

align-content 和align-items区别

  • align-items 适用于单行情况下, 只有上对齐、下对齐、居中和 拉伸
  • align-content适应于换行(多行)的情况下(单行情况下无效), 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
  • 总结:单行找align-items 多行找 align-content

flex-flow

属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow:row wrap; /*x主轴,换行 */

flex布局子项常见属性

  • flex子项目占的份数
  • align-self控制子项自己在侧轴的排列方式
  • order属性定义子项的排列顺序(前后顺序)

flex属性

定义子项目分配剩余空间,用flex来表示占多少份

.item {
    flex: <number>; /* 默认值 0 */
}

  <style>
      section {
      
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        
        section div:nth-child(1) {
      
            width: 100px;
            flex:1;
            height: 150px;
            background-color: red;
        }
        
        section div:nth-child(2) {
      
            flex: 1;
            background-color: green;
        }
        
        section div:nth-child(3) {
      
            width: 100px;
            height: 150px;
            background-color: blue;
        }
style>
<body>
    <section>
        <div>div>
        <div>div>
        <div>div>
    section>
body>

align-self控制子项自己在侧轴上的排列方式

  • align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。
  • 默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。
  span:nth-child(2) {
          /* 设置自己在侧轴上的排列方式 */
          align-self: flex-end;
    }
    

总结:align-items是控制素有的子项,而align-self是控制单个子项

<style>
        div {
      
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 让三个子盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
           
        }
        
        div span {
      
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
        
        div span:nth-child(3) {
      
             /* 我们想只让3号盒子下来底侧 */
            align-self: flex-end;
        }
    style>
head>

<body>
    <div>
        <span>1span>
        <span>2span>
        <span>3span>
    div>
body>

order 属性定义项目的排列顺序

数值越小,排列越靠前,默认为0。
注意:和 z-index 不一样。

 <style>
        div {
      
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
        }
        
        div span {
      
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
            
        div span:nth-child(2) {
      
            /* 默认是0   -1比0小所以在前面 */
            order: -1;
        }
        div span:nth-child(3) {
      
            align-self: flex-end;
        }
    style>
head>

<body>
    <div>
        <span>1span>
        <span>2span>
        <span>3span>
    div>
body>

你可能感兴趣的:(前端移动与开发)