[CSS]关于Flexbox

头像
Teemo
    阅读 7 分钟
    1

    如何使用Flexbox

    <ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

    上述代码中，ul中三个li，可以将ul称为父元素，li称为子元素。

    要使用Flexbox，必须使父元素变成一个Flex容器。只需要显式地设置display:flex;或display:inline-flex；即可。

    此时子元素就会变成Flex项目。

    Flex容器属性

    flex-direction

    flex-direction: row || column || row-reverse || column-reverse; //行、列和行列的反向

    flex-wrap

    flex-wrap: wrap || nowrap || wrap-reverse; //换行、不换行、反向换行

    flex-flow

    flex-flow是flex-direction和flex-wrap两个属性的速记属性。

    justify-content

    justify-content: flex-start || flex-end || center || space-between || space-around； //左对齐、右对齐、居中、相同间隔、相同空间

    align-items

    align-items: flex-start || flex-end || center || stretch || baseline； //顶部对齐、底部对齐、垂直居中、使项目和容器高度一致、基线对齐

    align-content

    align-items: flex-start || flex-end || center || stretch； //顶部对齐、底部对齐、垂直居中、使项目和容器高度一致

    Flex项目属性

    order

    按order的值从小到大排列。

    flex-grow和flex-shrink

    flex-grow和flex-shrink属性控制Flex项目在容器有多余的空间如何放大（扩展），在没有额外空间又如何缩小。

    flex-basis

    flex-basis属性可以指定Flex项目的初始大小。

    flex

    flex是flex-grow、flex-shrink和flex-basis三个属性的速记。

    *:flex: 2 1 0 与写为 flex: 2 是一样的，2 表示任何正数。

    align-self

    align-self: auto || flex-start || flex-end || center || baseline || stretch;

    绝对项目和相对项目

    绝对Flex项目的宽度只基于 flex 属性，而相对Flex项目的宽度基于内容大小。

    Auto-margin对齐

    当在Flex项目上使用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有剩余空间。

    clipboard.png

    切换flex-direction

    如果将 flex-direction 切换为 column，它就不再遵循英语的范式，而是日语的范式，即从右到左为Cross Axis，从上到下为Main Axis。

    总结

    阅读完原文链接中的文章收获颇多，了解了Flex模型，跟着最后的提示做出了一个相关demo。同时也了解了响应式设计的一点皮毛。

    clipboard.png

    源码

    <!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title>Catty Music</title>
    <link rel="stylesheet" href="flexdemo.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
  </head>
  <body>
    <main>
      <aside class="sm-hide">
        <i class="fa fa-bars"></i>
        <i class="fa fa-home"></i>
        <i class="fa fa-search"></i>
        <i class="fa fa-volume-up"></i>
        <i class="fa fa-user"></i>
        <i class="fa fa-spotify"></i>
        <i class="fa fa-cog"></i>
        <i class="fa fa-soundcloud"></i>
      </aside>
      <section class="content">
        <div class="music-head">
          <img src="./2.jpg" />
          <section class="catty-music">
              <div>
                  <p>CattyBoard Top 100 Single Charts (11.06.36)</p>
                  <p>Unknown Artist</p>
                  <p>2016 . Charts . 100 songs</p>
              </div>
              <div>
                <i class="fa fa-play">Play all</i>
                <i class="fa fa-plus">Add to</i>
                <i class="fa fa-ellipsis-h">More</i>
              </div>
          </section>
            
        </div>

        <ul class="music-list">
            <li>
              <p>1. One Dance</p>
              <p class="sm-hide">Crake feat CatKid & Cyla</p>
              <p class="music-time">2:54</p>
              <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
            </li>
            <li>
              <p>2. Panda</p>
              <p class="sm-hide">Cattee</p>
              <p class="music-time">4:06</p>
              <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
            </li>
            <li>
              <p>3. Can't Stop the Feeling!</p>
              <p class="sm-hide">Catin Cimberlake</p>
              <p class="music-time">3:56</p>
              <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
            </li>
            <li>
              <p>4. Work From Home</p>
              <p class="sm-hide">Cat Harmony feat Colla</p>
              <p class="music-time">3:34</p>
              <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
            </li>
        </ul>
      </section>
    </main>
    <footer>
      <div class="music-info">
        <img src="./2.jpg" />
        <section class="music-info2">
          <p>If It Ain't Love</p>
          <p>Castson Derulo</p>
        </section>
      </div>
      <div class="music-control">
        <i class="fa fa-step-backward"></i>
        <i class="fa fa-pause"></i>
        <i class="fa fa-forward"></i>
        <i class="fa fa-stop-circle"></i>
        <i class="fa fa-random"></i>
      </div>
    </footer>
  </body>
</html>
    * {
    box-sizing: border-box;
}
html,body{
  height: 100%;
}
body{
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin: 0;
  color: #222;
  font-size: .9em;
}
main{
  flex: 1 0 auto;
  display: flex;
}
aside{
  flex: 0 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: #f2f2f2;
}
aside i.fa{
  font-size: .9em;
}
.content{
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
.music-head{
  flex: 0 0 280px;
  display: flex;
  padding: 40px;
  background-color: #4e4e4e;
}
.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}
.catty-music div:nth-child(1){
  margin-bottom: auto;
}
.catty-music div:nth-child(2){
  margin-top: 0;
}
.catty-music div:nth-child(2) i.fa{
  font-size: .9em;
  padding: 0 .7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}
.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}
.music-list{
  flex: 1 0 auto;
  list-style-type: none;
  padding: 5px 10px 0px;
}
li{
  display: flex;
  padding: 0 20px;
  min-height: 50px;
}
li p{
  flex: 0 0 25%;
}
li span.catty-cloud{
  border: 1px solid black;
  font-size: .6em;
  padding: 3px;
}
li:nth-child(2n){
  background-color: #f2f2f2;
}
footer{
  flex: 0 0 90px;
  padding: 10px;
  color: #fff;
  background-color: #BC2F2E;
  display: flex;
}

.music-info{
  display: flex;
  margin-right: auto;
}
.music-control{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 30%;
}
.music-info img{
  width: 90px;
  padding-right: 10px;
}

@media screen and (max-width:64em){
  .sm-hide{
    display: none;
  }
  .music-head{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    background-color: #4e4e4e;
  }
  .catty-music{
    text-align: center;
    padding: 0;
  }
  .catty-music div:nth-child(1) p:first-child{
    margin: 20px 0;
    font-size: 1em;
  }
  .music-head img{
    width: 50%;
    margin-bottom: 10px;
  }
  .music-time{
    text-align: right;
  }
  li p{
    flex: 0 0 50%;
  }
  .music-control{
    justify-content: space-around;
  }
  
}
    css
    本文系转载，阅读原文
    https://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html
    Teemo
    38 声望1 粉丝
    « 上一篇
    [JS]《你不知道的Javascript·上》——this关键字
    下一篇 »
    [CSS]《CSS揭秘》第六章——用户体验

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    [小程序]撸了第一个小程序

    Teemo阅读 1.5k

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.6k

    头像
    前端开发工具

    寒青赞 15阅读 4.6k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 2.3k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 11阅读 1.5k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1k

    头像
    CSS炫酷光晕按钮特效

    南城FE赞 3阅读 1k

    0 条评论
    得票最新