说说弹性布局

栏目: Html · 发布时间: 5年前

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

弹性布局

弹性布局,是一种布局方式

主要解决某个元素中子元素的布局方式

它为布局提供了强大的灵活性

概念和语法

基本设置

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

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

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

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

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

特点

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

容器中的属性

  1. 设置主轴方向

    flex-direction:
       取值:row,默认值,主轴是x轴,主轴起点是左端
       row-reverse,  主轴是x轴,主轴起点是右端
       column,主轴是y轴,主轴起点在顶部
       column-reverse,主轴是y轴,主轴起点在底部
  2. 设置项目的换行显示

    flex-wrap:
       取值:nowrap 默认值,空间不够时,也不换行,项目自动缩小
       wrap 空间不够就换行
       wrap-reverse 换行,并反转
  3. 上面两项属性可以缩写成

    flex-flow:
  4. 定义项目在主轴上的对齐方式

    justify-content:
       取值:flex-start,默认值,以主轴起点对齐
       flex-end,以主轴终点对齐
       center  在主轴上居中对齐
       space-between 两端对齐,两端无空白
       space-around 每个间距大小相同,两边会留白
  5. 定义项目在交叉轴上的对齐方式

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

项目中的属性

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

    定义项目排列顺序,值越小,越靠近起点,默认值为0
       取值:无单位的整数
  2. flex-grow

    定义项目的放大比例
       如果容器有足够大的剩余空间,项目将按比例放大
       取值:无单位整数,默认值0,不放大
  3. flex-shrink

    定义项目缩小的比例,容器空间不足时,项目该如何缩小
       取值:无单位整数,默认值为1。
       取值为0,不缩小。取值越大,缩小越快。
  4. flex-basis

    主轴存在剩余空间时,分配给此项目多少空间,默认auto即本身宽度
       类似height和width写法
  5. 以上三个属性可以缩写为

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

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

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

不努力

就淘汰


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

密码朋克

密码朋克

[澳] 朱利安·阿桑奇 / Gavroche / 中信出版社 / 2017-10 / 42.00元

互联网已经在世界各地掀起了革命,然而全面的打击也正在展开。随着整个社会向互联网迁移,大规模监控计划也正在向全球部署。我们的文明已经来到一个十字路口。道路的一边通往一个承诺“弱者要隐私,强 者要透明”的未来,而另一边则通往一个极权的互联网,在那里,全人类的权力被转移给不受问责的间谍机构综合体及其跨国公司盟友。 密码朋克是一群倡导大规模使用强密码术以保护我们的基本自由免遭攻击的活动家。维基解密的......一起来看看 《密码朋克》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具