[CSS]关于Flexbox

2024-02-08 18:18:10

如何使用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 的方向（左、右或者二者都是）会占据所有剩余空间。

切换flex-direction

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

总结

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

源码

<!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;
  }
  
}

码农公寓