摘要：主要用来做横向的布局。元素的布局学习我分成两个部分，第一个部分是元素布局。以下几个属性影响着元素的布局。详细还是看分钟彻底弄懂布局讲的非常明白。的时候，伸缩时需要考虑，按照进行等比例伸缩。布局套路学习布局教程实例篇
前言：
这是我看过最好的flex布局教程：
30分钟彻底弄懂flex布局
文档流：块级元素独占一行，从上往下排列，行级元素从左往右排列。
display inline-block主要用来做横向的布局。
用分离负maigin用来产生位移。
学习flex我分成两个部分，第一个部分是元素布局。以下几个属性影响着元素的布局。
/*容器上：*/ justify-content align-items flex-direction flex-wrap flex-flow align-content /*元素上：*/ order align-self
做完下面的游戏，看完下面的两篇文章，理解了上面几个属性的用法，就理解了元素的布局。他们已经写得很详细了。这里不需要我班门弄斧。
30分钟彻底弄懂flex布局
Flex 布局教程：语法篇
CSS3【Flex布局】有趣的青蛙游戏
游戏一共24关，每关把所有颜色青蛙移动到对应颜色荷叶上即可过关
通关后就会使用影响布局的属性。
而影响大小和伸缩与尺寸的属性flex-grow、flex-shrink、flex-basis这三个属性比较难理解，可以看30分钟彻底弄懂flex布局和深入理解flex布局的flex-grow、flex-shrink、flex-basis
在这里记录一下自己的理解。
flex-basisflex-basis 用于设置元素在主轴上的大小（如果轴体变成从上到下，就会覆盖height）。
flex-basis: 0 表示元素根据内容撑开宽度，width不管用了。
flex-basis优先级比width高。
flex-basis为auto时，如设置了width则元素尺寸由width决定；没有设置则由内容决定。（默认就是auto）所以如果一个容器设置为flex布局，那么他里面的元素在没有设置宽高的时候，大小都由内容撑开！
详细还是看30分钟彻底弄懂flex布局讲的非常明白
flex-shrink如果不换行flex-wrap: nowrap;主轴上的元素总和超了容器宽度，那么默认会缩小。
flex-shrink默认是1，即缩小因子是1，也就是当不够分配时，元素都将等比例缩小，占满整个宽度。
flex-shrink是0表示这个元素不缩小，如果超了，就在其他元素上动手脚缩小。
详细还是看30分钟彻底弄懂flex布局讲的非常明白。
flex-grow默认为flex-grow:0，即，不扩大。原来是多大就是多大（flex-basic或者width、height的长度）
然后按照扩大因子按权分配。例如有50px没有分配，两个子元素flex-grow:分别为flex-grow:3和flex-grow:2，那么第一个元素就分配30px，第二个元素分配20px。
如果第一个元素设置flex-grow为1，另一个没有设置，那么多出来的全部的大小都会分配给第一个元素。
详细还是看30分钟彻底弄懂flex布局讲的非常明白。
flexflex = flex-grow + flex-shrink + flex-basis
一些简写
flex: 1 = flex: 1 1 0%// flex: 2 = flex: 2 1 0% flex: auto = flex: 1 1 auto; flex: none = flex: 0 0 auto; // **常用于固定尺寸 不伸缩**flex: 1和 flex: auto的区别
flex-grow + flex-shrink都是1的话意思就是不管是超出这一行，还是小于这一行，都按比例占满这一行（放大或缩小元素）！！
flex:1 和 flex:auto 的区别
都是按比例放大缩小，然后占满一行。
其实可以归结于flex-basis:0和flex-basis:auto的区别。flex-basis是指定初始尺寸，当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸；相反当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑。
总结：
flex: 1的时候，伸缩时不需要考虑width，因为flex-basis:0（元素为内容撑开的宽度），只需要按照元素的内容宽度进行等比例的伸缩。
flex: auto的时候，伸缩时需要考虑width，按照width进行等比例伸缩。
举例：flex：1应用：
#container{
display: flex;
flex-wrap: nowrap;
width: 200px;
height: 200px;
background-color: orange;
}
#item:nth-child(1){
flex:1;/*这里*/
width: 100px;
height:100px;
background-color: blue;
}
#item:nth-child(2){
flex:1;/*这里*/
width:50px;
height:100px;
background-color: green;
}
#item:nth-child(3){
/* flex:1; *//*这里没写*/
width:30px;
height: 100px;
background-color: #ccc;
}
前两个元素将剩余的空间平局分了，因为没有内容，显示的宽度都是0，于是两个元素分得的扩大像素一样，所以平分了。
而如果是flex：auto，那么将会根据width按比例伸缩，占满一行。
flex布局套路学习Flex 布局教程：实例篇
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114136.html
摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。 写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。 常见的页面布局 在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...
摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。 写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。 常见的页面布局 在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...
摘要：几种常见布局的写法首先要对父元素设置布局方式，同时在本案例中，利用媒体查询，当屏幕分辨率小于的时候，布局变成纵向排列。两列布局定宽是的简写方式。 flex布局目前基本上兼容主流的浏览器，且实现方式简单。我整理了flex的一些知识点，并且总结归纳了几种常见布局的flex写法 flex基础知识点 flex-grow和flex-shrink相关计算公式 公式1：子元素空间 < 父容器 父...
摘要：布局也经历了一段演变历史。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。常规布局是基于块和内联流方向，而布局是基于流。 前言 你还在用display+position+float来进行css布局吗？有没有觉得用传统的这种布局方法来实现特殊布局特别麻烦困难，例如：垂直居中。今天来记录一下自己对flex布局的了解（虽然不算神马新东西了都可以说是旧东西...
阅读 1461·2021-10-18 13:29
阅读 2687·2021-10-12 10:18
阅读 3583·2021-09-22 15:06
阅读 2598·2019-08-29 17:09
阅读 2789·2019-08-29 16:41
阅读 1495·2019-08-29 13:48
阅读 3228·2019-08-26 13:49
阅读 3326·2019-08-26 13:34
