[CSS]关于Flexbox

elisa.yang 发布于2019-08-30 15:54 / 3234人阅读

摘要：如何使用上述代码中，中三个，可以将称为父元素，称为子元素。此时子元素就会变成项目。与写为是一样的，表示任何正数。总结阅读完原文链接中的文章收获颇多，了解了模型，跟着最后的提示做出了一个相关。同时也了解了响应式设计的一点皮毛。

如何使用Flexbox

上述代码中，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。同时也了解了响应式设计的一点皮毛。

源码


  
    
    Catty Music
    
    
  
  
    
      
        
        
        
        
        
        
        
        
      
      
        
          
          
              
                  CattyBoard Top 100 Single Charts (11.06.36)
                  Unknown Artist
                  2016 . Charts . 100 songs
              
              
                Play all
                Add to
                More
              
          
            
        

        
            
              1. One Dance
              Crake feat CatKid & Cyla
              2:54
              CATTY CLOUD SYNC
            
            
              2. Panda
              Cattee
              4:06
              CATTY CLOUD SYNC
            
            
              3. Can"t Stop the Feeling!
              Catin Cimberlake
              3:56
              CATTY CLOUD SYNC
            
            
              4. Work From Home
              Cat Harmony feat Colla
              3:34
              CATTY CLOUD SYNC
            
        
      
    
    
      
        
        
          If It Ain"t Love
          Castson Derulo

* {
    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;
  }
  
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116836.html

我所知道的flex布局 —— 上篇

摘要：布局也经历了一段演变历史。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。常规布局是基于块和内联流方向，而布局是基于流。前言你还在用display+position+float来进行css布局吗？有没有觉得用传统的这种布局方法来实现特殊布局特别麻烦困难，例如：垂直居中。今天来记录一下自己对flex布局的了解（虽然不算神马新东西了都可以说是旧东西...

andycall 2019-08-30 13:13 评论0 收藏0
使用 Flexbox 使浮动元素垂直居中

摘要：你需要这两列能够垂直居中。这意味着浮动元素总会被固定在顶部。关于的浏览器兼容性可以在查看得到使用使浮动元素垂直居中垂直居中一直是一个很麻烦的问题，但基于 FlexBox 的垂直居中就非常简单了。考虑下面的场景：你正在使用网格布局的框架，比如 Bootstrap、Foundation、 Skeleton、Susy 等。你有两个包含动态内容的列（每列都是一个盒模型），你并不知道每...

LiangJ 2019-08-29 13:03 评论0 收藏0
如何使用Flexbox和CSS Grid，实现高效布局

摘要：代码如下页面内容样式接下来，将侧边栏和主内容区域使用一个包含起来。列和行布局部分横跨所有的列。也可以使用简写，起始值和结束值位于同一行上，并用斜杠分隔。设计方法总结以上的布局设计中，使用了来进行整体布局以及设计中的非线性部分。 CSS 浮动属性一直是网站上排列元素的主要方法之一，但是当实现复杂布局时，这种方法不总是那么理想。幸运的是，在现代网页设计时代，使用 Flexbox 和 CSS...

eternalshallow 2019-08-29 13:29 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0