当前位置: 萬仟网 > IT编程>网页制作>CSS > flex布局笔记

flex布局笔记

2019年06月16日 06:44  | 萬仟网IT编程  | 我要评论

这篇笔记是在读完阮一峰老师的flex语法和{前端开发}的flex设置成1和auto有什么区别的两篇博客后自己记录的布局思想和遇到的问题。
附上链接:

1.容器属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-flow是direction和wrap的简写。

一般默认关注direction,不关注wrap,wrap一般都是换行的。

2. 确定主轴和确定主轴上的项目排列

而direction就是确定主轴,有row,column还有他们的reverse。也就是横着竖着还有他们的倒着。

主轴确定了下一步可以确定他们的项目在主轴用什么样的格式排列在主轴上(左右向)前提主轴是row,如果主轴是column,则相反

所以就有justify-content这个属性,不展开了,五个属性可以看阮老师的文章。

3.确定轴的对齐方式

用align-content这个属性,同样有五个,他们可以在主轴不唯一的时候让主轴们看起来不一样,让他们大块的动。

4.确定主轴项目的上下方向的格式(项目交叉轴上的格式)

align-items这个属性,让项目在上下方向的进行格式的操作。(默认主轴是row,也就是主轴是横向的,如果是column则相反)不展开说了。

5.确定项目的属性

order这个属性不是很重要,因为一般排序的话在html直接做出来了,不必要拿到css排序。

项目变大缩小还有基础大小(暂时叫基础大小)的三个属性flex-grow,flex-shrink,flex-basis

默认值是0,1,auto

关于grow和shrink来说,只需要关注他们在父组件大小中是否有余地或者没有余地时会不会变换宽度即可,变换的话就是1,不变的话就是0。

对于basis这个属性,默认是auto。阮老师给出的结论是在分配多余空间之前,项目占据的主轴空间,所以也就是说basis是在父组件有多余的地方的时候配合grow才会显出作用的。

<div class="parent">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
</div>
<style type="text/css">
    .parent {
        display: flex;
        width: 600px;
    }
    .parent > div {
        height: 100px;
    }
    .item-1 {
        flex: 2 1 0%;
        background: blue;
    }
    .item-2 {
        flex: 2 1 0%;
        background: darkblue;
    }
    .item-3 {
        flex: 1 1 0%;
        background: lightblue;
    }
</style>

假设由上面这三个结构他们的basis都是0%,他们的flex-grow为2,2,1。

现在进行三个步骤来计算他们最终要占多大地方

  • 计算三个子组件basis的合

    • 都是百分之0,那合就是0px
  • 计算剩余的分配空间

    • 父组件是600px,三个子组件的basis之和为0,所以剩余可分配的就是600-0=600px
  • 分配剩余空间

    • item1 = (600/5*2)=240
    • item2 = (600/5*2)=240
    • item3= (600/5*1)=120

    他们基础都为0,所以他们最后的宽度为240,240,120

那么其他配置不变,item-1 width=140px,item-2的basis变成auto,width=100px。item-3的basis变成200px;

<style type="text/css">
    .parent {
        display: flex;
        width: 600px;
    }
    .parent > div {
        height: 100px;
    }
    .item-1 {
        width:140px;
        flex: 2 1 0%;
        background: blue;
    }
    .item-2 {
        width:100px;
        flex: 2 1 auto%;
        background: darkblue;
    }
    .item-3 {
        flex: 1 1 200px;
        background: lightblue;
    }
</style>

则还是按照刚才的三部走

  • 计算三个子组件basis的合
    • basis为0%,auto,200px。那么item-1的就变成0px,item-2的变成了100px,和原尺寸一样,item-3的为200px.则他们的合为300px.
  • 计算剩余的分配空间
    • 600-300=300px
  • 分配剩余空间
    • item-1分配到300/5*2=120
    • item-2分配同样为120
    • item-3分配到60
  • 他们基础分别为0,100,200。加上他们分配到剩余的就为120,220,260

6.flex的简写

//不写flex
flex: 0 1 auto;

//flex:none;
flex: 0 0 auto;

//flex:auto;
flex: 1 1 auto;

//flex:1;
flex:1 1 0%;

//flex: 0%;
flex:1 1 0%;

//flex:24px;
flex:1 1 24px;

//flex: 2 3;
flex: 2 3 0%;

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • 回顾这段时间的收获

    边框的阴影效果,可以在css中使用box-shadow来实现 属性值有X-shadow,Y-shadow,blur,spread,color,ins... [阅读全文]
  • css3 2d转换

    css3的2d转化,我所知的有5种。 因为是css属性,所以必然,2d转化的设置在style中设置基本格式,transform:XXX;以选择哪种转... [阅读全文]
  • css动画

    css的动画效果在style标签中用@keyframes name{。。。}的形式定义,使用animation:name time 。。。的形式进行... [阅读全文]
  • html中的框架frameset和frame及iframe

    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。 1、框架标签(Frame) 简单的三框架页面: 所有主流浏览器都支持 <frame... [阅读全文]
  • web前端如何优化自己的代码

    前端的性能优化主要分为三部分: HTML优化 避免 HTML 中书写 CSS 代码,因为这样难以维护。 使用Viewport加速页面的渲染。 使用语... [阅读全文]
  • css常用代码大全

    css常用代码大全,html+css代码 html+css可以很方便的进行网页的排版布局,还能减少很多不必要的代码。 一.文本设置1、font-si... [阅读全文]
  • CSS 笔记

    CSS 笔记

    @[toc] 概念 全称 : Cascading Style Sheet 级联样式表 (层叠) 作用 : 定义 如何显示 HTML 元素 出现的原因... [阅读全文]
  • 简单明了带你了解CSS Modules

    层叠样式表 我们知道,css的全名叫做层叠样式表,这个“层叠”到底是什么意思呢? 有一种解释是,如果你先写了一条样式规则(选... [阅读全文]
  • 新手学习css优先级

    新手学习css优先级

    css不是一种程序语言,而是一种描述语言。因此,可以说,css理解起来是非常容易的,大部分人通过简单的学习就可以懂得如何写css代码... [阅读全文]
  • css进阶学习 选择符

    在我最早开始写css的时候,其代码上的高自由度就一直很令我困惑。这就是说,同一个设计,如果让不同的人来实现,最终的代码一定是有差异的... [阅读全文]

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com