CSS篇 - 弹性布局flex

zhaochunqi 发布于2019-08-30 11:26 / 3536人阅读

摘要：起始值，分配多余空间前的初始长度主轴横向时是宽度可用的长度值，如等浏览器根据这个属性，计算主轴是否有多余空间。

目前纯文字描述，后期补上图片说明

概念

主轴：main-axis，默认横向的轴

交叉轴：cross-axis，默认纵向的轴，有的称为侧轴，与主轴90°中心旋转交叉

弹性布局的结构


    1

    1

容器css

.flex-container{
    /*主轴方向： row行（横向） | row-reverse反向行 | column列（纵向） | column-reverse反向列 */
    flex-direction: row;
    /*换行：nowrap不换行 | wrap换行 | wrap-reverse反向换行（往上换行）*/
    flex-wrap: nowrap;
    /*以上两者的简写*/
    /*flex-flow:  || ;*/

    /*
        主轴的对齐方式： 
        flex-start主轴起点对齐（横向是左对齐，纵向是上对齐）
        flex-end主轴终点对齐
        center主轴中点对齐
        space-between两端对齐
        space-around两端对齐，每个项目两侧的间隔相等并向中间靠拢
      */
    justify-content: flex-start;
    /*
        交叉轴的对齐方式：
        flex-start | flex-end | center
        baseline项目的第一行文字的基线对齐
        stretch拉长，如果项目未设置高度或设为auto，将占满整个容器的高度
    */
    align-items: stretch;
    /*
        多根轴线时交叉轴对齐方式（换行时可产生多根轴线，不换行只有一根轴线此值无效）：
        flex-start | flex-end | center
        space-between两端对齐
        space-around两端对齐，每个轴线两侧的间隔相等向中间靠拢
        stretch拉长，所有轴线占满整个容器
    */
    align-content: stretch;
}

项目css

.flex-item{
  /*排列顺序：数值越小，排列越靠前，默认为0*/
  order: 0;
  /*放大比例，与有设置该值的项按比例放大并占满空间，默认为0即如果存在剩余空间，也不放大*/
  flex-grow: 0;
  /*缩小比例，项目在主轴总宽度超出100%对当前项按比例缩小，默认为1即如果空间不足，该项目将缩小。*/
  flex-shrink: 1;
  /*
    起始值，分配多余空间前的初始长度（主轴横向时是宽度）【width/height可用的长度值，如1px/1em/1rem/auto/30%等】
    浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
    */
  flex-basis: auto;
  /*以上三者的简写*/
  /*flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ];*/
  /*
    语法糖解析：
    //none快捷键
    flex:none = flex:0 0 auto
    
    //数字(grow,shrink=1,basis=0)
    flex:2 = flex:2 1 0
    
    //数字，数字(grow,shrink,basis=0)
    flex:2 3 = flex:2 3 0
    
    //非数字(grow=1,shrink=1,basis)
    flex:30px = flex:1 1 30px
    flex:30% = flex:1 1 30%
    flex:auto = flex:1 1 auto
    
    //数字，非数字(grow,shrink=1,basis)
    flex:2 30px = flex:2 1 30px
    flex:2 30% = flex:2 1 30%
    flex:2 auto = flex:2 1 auto
    
    //数字，数字，非数字(grow,shrink,basis)
    flex:2 3 30px
    flex:2 3 30%
    flex:2 3 auto
  */

  /*
    自身对齐方式：auto | flex-start | flex-end | center | baseline | stretch
    默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
  */
  align-self: auto;
}

GPU云服务器云服务器 flex布局 CSS_Flex css布局 css布局教程

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

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

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

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

andycall 2019-08-30 13:13 评论0 收藏0
CSS6：flex布局

摘要：主要用来做横向的布局。元素的布局学习我分成两个部分，第一个部分是元素布局。以下几个属性影响着元素的布局。详细还是看分钟彻底弄懂布局讲的非常明白。的时候，伸缩时需要考虑，按照进行等比例伸缩。布局套路学习布局教程实例篇前言：这是我看过最好的flex布局教程：30分钟彻底弄懂flex布局传统的布局方法与flex属性通览 showImg(https://segmentfault.com/i...

Jioby 2019-08-29 17:09 评论0 收藏0
CSS 搞事技巧：checkbox+label+selector

摘要：列出这个两个属性的常用值看可知已经增加了更多的值代码解读该项目是通过来渲染的，所以会使用到的语法，不过此处仅使用的循环来解决重复书写的问题该效果参考来源。接着使用布局来将它们分割，因为这次主要将的不是，所以就不进行阐述了。介绍其实这篇文章写到一大半时它的名字还叫做《重温 Flex 布局》，结果写着写着就走了心，附上一图表示心情吧： showImg(https://segmentf...

alphahans 2019-08-30 15:43 评论0 收藏0