说说弹性布局

learn_shifeng 发布于2019-08-30 11:07 / 746人阅读

摘要：占满交叉轴上所有的空间使用容器定义的的值以上就是我对弹性布局的一些知识点总结，如有异议，烦请告知，谢谢不努力就淘汰

弹性布局

弹性布局，是一种布局方式
主要解决某个元素中子元素的布局方式
它为布局提供了强大的灵活性

概念和语法

基本设置

display: flex;    // 将块级元素设置为容器
display: inline-flex    // 将行内元素设置为容器

这里出现了容器这个词，在弹性布局中有容器和项目的说法

容器：要发生(设置)弹性布局的子元素，的**父元素**称为容器
项目：要做弹性布局的**子元素们**，称之为项目

弹性布局中也有主轴和交叉轴的概念

项目们排列方向的一条轴(类似坐标轴中的x、y轴),就称为主轴
和这条主轴垂直相交的轴，就称为交叉轴
默认主轴方向是横向排列，即主轴 -> x轴

特点

当元素设置成弹性容器后，它的所有子元素变成弹性项目
此时项目的float/clear/vertical-align属性会失效

容器中的属性

设置主轴方向

   flex-direction:
   取值：row，默认值，主轴是x轴，主轴起点是左端
   row-reverse,  主轴是x轴，主轴起点是右端
   column，主轴是y轴，主轴起点在顶部
   column-reverse,主轴是y轴，主轴起点在底部

设置项目的换行显示

   flex-wrap:
   取值：nowrap 默认值，空间不够时，也不换行，项目自动缩小
   wrap 空间不够就换行
   wrap-reverse 换行，并反转

上面两项属性可以缩写成

   flex-flow:

定义项目在主轴上的对齐方式

   justify-content:
   取值：flex-start,默认值，以主轴起点对齐
   flex-end，以主轴终点对齐
   center  在主轴上居中对齐
   space-between 两端对齐，两端无空白
   space-around 每个间距大小相同，两边会留白

定义项目在交叉轴上的对齐方式

   align-items:
   取值：flex-start 交叉轴起点对齐
   flex-end 交叉轴终点对齐
   center 交叉轴居中对齐
   baseline 交叉轴基线对齐，就是交叉轴起点
   stretch 前提，项目不写高。占满交叉轴上所有的空间

项目中的属性

只能设置在其中一个项目上，不会影响其他项目的效果

order

   定义项目排列顺序，值越小，越靠近起点，默认值为0
   取值：无单位的整数

flex-grow

   定义项目的放大比例
   如果容器有足够大的剩余空间，项目将按比例放大
   取值：无单位整数，默认值0，不放大

flex-shrink

   定义项目缩小的比例，容器空间不足时，项目该如何缩小
   取值：无单位整数，默认值为1。
   取值为0，不缩小。取值越大，缩小越快。

flex-basis

   主轴存在剩余空间时，分配给此项目多少空间，默认auto即本身宽度
   类似height和width写法

以上三个属性可以缩写为

   flex:
   默认值是 0 1 auto
   常用写法 flex:1 -> 1 1 auto
   利用这个可以方便的实现**圣杯布局**
   转载一个自认为不错的实现方法[css圣杯布局的实现][1]

align-self

  定义当前项目在交叉轴上的对齐方式
  这个属性会覆盖掉容器设置的align-items属性
  取值：flex-start 交叉轴起点对齐
  flex-end 交叉轴终点对齐
  center 交叉轴居中对齐
  baseline 交叉轴基线对齐，就是交叉轴起点
  stretch 前提，项目不写高。占满交叉轴上所有的空间
  auto 使用容器定义的align-items的值

以上就是我对弹性布局的一些知识点总结，如有异议，烦请告知，谢谢

不努力
就淘汰

云服务器服务器托管说说发表说说刷评论说说软件说说java流

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

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

CSS系列——浏览器默认样式

摘要：了解标签在各浏览器当中的默认样式，可以让我们了解，为什么会要写，当中要怎么写样式最合理。了解HTML标签在各浏览器当中的默认样式，可以让我们了解，为什么会要写Reset.css，Reset.css当中要怎么写样式最合理。试着思考下面的问题：为什么会有默认样式？每个浏览器的默认样式有什么不同？ Reset.css具体怎么写，每个浏览器展示的效果才会一致？默认样式这里说的默认...

keithyau 2019-08-05 14:16 评论0 收藏0
CSS系列——浏览器默认样式

摘要：了解标签在各浏览器当中的默认样式，可以让我们了解，为什么会要写，当中要怎么写样式最合理。了解HTML标签在各浏览器当中的默认样式，可以让我们了解，为什么会要写Reset.css，Reset.css当中要怎么写样式最合理。试着思考下面的问题：为什么会有默认样式？每个浏览器的默认样式有什么不同？ Reset.css具体怎么写，每个浏览器展示的效果才会一致？默认样式这里说的默认...

lewinlee 2019-08-30 15:53 评论0 收藏0
30分钟彻底弄懂flex布局

摘要：容器属性元素属性就连老外也都在吐槽不好理解，可见还是有一定的学习成本。沿主轴的排列处理弹性元素永远沿主轴排列，那么如果主轴排不下，该如何处理通过设置可使得主轴上的元素不折行折行反向折行。在属性值上，比多了两个值和。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏目前在不考虑IE以及低端安卓机（4.3-）的兼容下，已经可以放心使用flex进行...

happyhuangjinjin 2019-04-23 15:23 评论0 收藏0
前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)

答案自己谷歌或百度找。一、来源背景面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...

Kerr1Gan 2019-08-26 12:20 评论0 收藏0
前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)

答案自己谷歌或百度找。一、来源背景面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...

lushan 2019-08-02 11:34 评论0 收藏0