Flexbox 该怎么用以及应用场景

一首小清哥
2,583 阅读6分钟
原文链接： azq.space

Flex作为css3中的新属性，一直被大家所熟知但是，应用的地方确实很少，那么让我们一起来研究研究它吧代码量比较大，请在pc端查看

说明

  • 设置了Flex布局后，子元素的float，clear，还有verticle-align属性都不起作用
  • 设置了display:flex属性的元素，称为Flex容器，他里面的所有子元素统称为容器成员，Flex容器有两根坐标轴：水平的叫主轴和垂直的叫交叉轴
  • flex是display的一个属性值。与之相当应的还有一个是inline-flex。

属性

父级：

  • flex-direction:决定主轴的方向(row|row-reverse|column|column-reverse),起点(左|右|上|下)
  • flex-wrap:单行显示还是多行显示(nowrap|wrap|wrap-reverse)(不换行|换行|换行由下向上排列)
  • flex-flow :flex-direction属性和flex-wrap属性的简写
  • justify-content:项目在主轴方向上的对齐方式(flex-start|flex-end|center|space-between|space-around)(左|右|居中|两端对齐容器，各个Flex项目之间的间距相等|每一个Flex项目两侧的间隔相等)
  • align-items:项目在交叉轴上的对齐方式(flex-start|flex-end|center|baseline|stretch)(对齐交叉轴的起点|对齐交叉轴的终点|以交叉轴为参考，居中对齐|项目第一行文字基线对齐|项目未定义高度或者设置为auto，Flex项目将占满整个窗口的高度)
  • align-content:多根轴线的对齐方式(flex-start|flex-end|center|space-between|space-around|stretch)(对齐交叉轴的起点|对齐交叉轴的终点
    |对齐交叉轴的终点|交叉轴两端对齐，轴线这间的间隔平均分布|项目（沿交叉轴方向）之间的间隔相等|（沿交叉轴方向）占满整个交叉轴)
    子集：
  • order：用于控制Flex项目的排列顺序，默认为0，值越小越靠前
  • flex-grow：用于定义Flex项目的放大比例，默认为0，即使存在剩余空间，也不放大
  • flex-shrink：用于定义Flex项目的缩小比例，默认为1，即空间不足，Flex项目将等比缩小。
  • flex-basis：用于定义如何分配多余空间默认值为auto，即Flex项目本来的大小
  • flex：flex-grow，flew-shrink和flex-basis的简写。默认值为0 1 auto
  • align-self：允许单个Flex项目有不同于其他Flex项目的对齐方式。默认值为auto，表示继承父元素的align-items属性，如果不存在父元素，则等同于 stretch。可取的值：flex-start | flex-end | center | baseline | stretch;
    stretch：Flex项目（沿交叉轴方向）占满整个交叉轴

ps 以上是概念性的东西，反正有很多定义不是很理解，只能按照子集的理解来

应用

a) 居中

* {
    margin: 0;
    padding: 0;
}       
html,
body {
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #ccc;
}
body {
    display: flex;
    flex-direction: row;                
}//原来是可以嵌套的display: flex;
.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
    background: #DBEFFA;
    margin: 10px;
}
.flex-item {
    background: #BDD8F5;
    color: #000;
    text-align: center;
    font-size: 14px;
    padding: 10px
}
.flex-item1 {
    width: 200px;
    height: 200px
}
.flex-item3,
.flex-item4 {
    margin: 5px;
    flex: 1
}
< div class="container container1">
    < div class="flex-item flex-item1">BigCan< br />公众号< br />infefe< /div>
< /div>
< div class="container container2">< !--不设置width、height-->
    < div class="flex-item flex-item2">BigCan< br />公众号< br />infefe< /div>
< /div>
< div class="container container3">< !--多个盒子居中-->
    < div class="flex-item flex-item3">BigCan< br />公众号< br />infefe< /div>
    < div class="flex-item flex-item4">BigCan< br />公众号< br />infefe< /div>
< /div>

图1

扩展: 居中大法

b) 子元素等高并子元素中的某一元素一直在底部
图2

< style>
    * {
        margin: 0;
        padding: 0;
    }
    
    html,
    body {
        width: 100%;
        height: auto;
        overflow: hidden;
        background: #ccc;
    }
    
    .container {
        width: 700px;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        background: #DBEFFA;
        justify-content: space-around;
    }
    .flex-item {
        background: #BDD8F5;
        color: #000;
        text-align: center;
        font-size: 14px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        
    }
    .text{
        flex: 1 0 auto;
    }
    .time {
        flex: 0 0 auto;//自己占了自己的空间之后把剩下的全部给了.text
    }
< /style>
< div class="container container1">
    < div class="flex-item flex-item1">
        < div class="text">
            < p>BigCan< br />公众号< br />infefe< /p>
            < p>BigCan< br />公众号 < br />infefe< /p>
            < p>BigCan< br />公众号< br />infefe< /p>
        < /div>
        < div class="time">11212< /div>
    < /div>
    < div class="flex-item flex-item1">
        < div class="text">
            < p>BigCan< br />公众号< br />infefe< /p>
            < p>BigCan< br />公众号< br />infefe< /p>
            < p>BigCan< br />公众号< br />infefe< /p>
            < p>BigCan< br />公众号< br />infefe< /p>
            < p>BigCan< br />公众号< br />infefe< /p>
            < p>BigCan< br />公众号< br />infefe< /p>
        < /div>
        < div class="time">11212< /div>
    < /div>
    < div class="flex-item flex-item1">
        < div class="text">
            < p>BigCan< br />公众号< br />infefe< /p>
        < /div>
        < div class="time">11212< /div>
    < /div>
    < div class="flex-item flex-item1">
        < div class="text">
            < p>BigCan< br />公众号< br />infefe< /p>
        < /div>
        < div class="time">11212< /div>
    < /div>
    < div class="flex-item flex-item1">
        < div class="text">
            < p>BigCan< br />公众号< br />infefe< /p>
        < /div>
        < div class="time">11212 < /div>
    < /div>
< /div>

c) 实现一个简单的响应式导航栏

< style type="text/css">
.navigation {
  list-style: none;
  margin: 0; 
  background: deepskyblue;  
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
}
.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: white;
}
.navigation a:hover {
  background: darken(deepskyblue, 2%);
}
@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}
@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;
  }
  
  .navigation a { 
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
  }
  .navigation li:last-of-type a {
    border-bottom: none;
  }
}
< /style>
< ul class="navigation">
  < li>< a href="#">Home< /a>< /li>
  < li>< a href="#">About< /a>< /li>
  < li>< a href="#">Products< /a>< /li>
  < li>< a href="#">Contact< /a>< /li>
< /ul>

d) 实现一个简单的页面布局方式

< style type="text/css">
.wrapper {
  display: flex;  
  flex-flow: row wrap;
  flex-flow: row wrap;
  
  font-weight: bold;
  text-align: center;
}
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}
.header {
  background: tomato;
}
.footer {
  background: lightgreen;
}
.main {
  text-align: left;
  background: deepskyblue;
}
.aside-1 {
  background: gold;
}
.aside-2 {
  background: hotpink;
}
@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}
@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}
body {
  padding: 2em; 
}
< /style>
< div class="wrapper">
  < header class="header">bigcan< /header>
  < article class="main">
    < p>bigcanbigcanbigcanbigcagcanbigcanbigcanbigcan< /p>  
  < /article>
  < aside class="aside aside-1">bigcan 1< /aside>
  < aside class="aside aside-2">bigcan 2< /aside>
  < footer class="footer">Power By bigcan< /footer>
< /div>
avatar
文章
阅读
粉丝