弹性盒模型

WelliJhon 发布于2019-08-30 10:57 / 1693人阅读

摘要：如果一个项目的属性为，其他项目都为，则空间不足时，前者不缩小。

弹性盒模型 1. 容器的概念

指定父元素为 flex

.parent { display: flex; }
.parent_inline { display: inline-flex; }

指定之后 float clear vertical-align 会失效

父元素称为 flex container 子元素称为 flex item

容器默认包含 main axis 和 cross axis，
main start main end 为主轴的起始位置和结束位置
cross start cross end 为交叉轴的起始位置和结束位置

flex item沿主轴排列，main size cross size 为所占据的主轴和交叉轴的空间

2. container的属性

flex-direction flex-wrap flex-flow justify-content align-items align-content 为定义在容器上的属性

flex-direction 主轴的方向

  row            主轴为水平方向，起点在左端 （默认值）
  row-reverse    主轴为水平方向，起点在右端
  column         主轴为垂直方向，起点在上沿
  column-reverse 主轴为垂直方向，起点在下沿

flex-wrap item的换行方向

  nowrap        不换行 （默认）
  wrap          换行，第一行在上方
  wrap-reverse  换行，第一行在下方

flex-flow direction、item的简写

justify-content 定义item在主轴上的对齐方式

flex-start    左对齐（默认值）
flex-end      右对齐
center        居中
space-between 两端对齐，项目之间的间隔都相等
space-around  两端对齐, 每个项目两侧的间隔相等

align-items 定义item在交叉轴上的对齐方式

flex-start 交叉轴的起点对齐
flex-end   交叉轴的终点对齐
center     交叉轴的中点对齐
baseline   项目的第一行文字的基线对齐
stretch    如果item未设置高度或设为auto，将占满整个容器的高度 （默认值）

align-content 多根轴线的对齐方式，单轴无效

flex-start    与交叉轴的起点对齐
flex-end      与交叉轴的终点对齐
center        与交叉轴的中点对齐
stretch       轴线占满整个交叉轴。（默认值）
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around  每根轴线两侧的间隔都相等,所以，轴线之间的间隔比轴线与边框的间隔大一倍

3. item的属性

order flex-grow flex-shrink flex-basis flex align-self 属性定义在 item 上

order item的排列顺序

  数值越小，排列越靠前，默认为0

flex-grow item的放大比例

  默认0，即如果存在剩余空间，也不放大
  如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
  如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

flex-shrink item的缩放比例

  默认为1，即如果空间不足，该项目将缩小
  如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
  如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis 在分配多余空间之前，item占据的主轴空间

  默认auto，即项目的本来大小
  设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex

  flex-grow, flex-shrink 和 flex-basis 的简写
  默认 0 (1 auto)
  auto 1 1 auto
  none 0 0 auto

align-self item 的对齐方式

  允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
  默认 auto, 表示继承父元素的 align-items属性,
  如没有父元素则为 stretch
  .item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }
  该属性可能取6个值，除了auto，其他都与align-items属性完全一致

GPU云服务器云服务器盒模型盒模型html吗简述html盒模型盒遥控

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

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

CSS中各种布局的背后(*FC)

摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 评论0 收藏0
弹性盒子模型详解

摘要：二弹性盒模型历史弹性盒模型历史英文原版或者查看中文翻译版另外附上标准文档弹性盒模型在过去几年间制定了三版草案规范。给子元素直接添加属性即可七后话以上是本文所有内容，以下是小白我的感慨。一、前言由于W3C在制定弹性盒模型内容有多版草案，在网上浏览了很多视频和文章，版本有新有旧，所以准备写一篇关于弹性盒模型的文章，一是辅助自己学习，二是帮忙其他前端学习者更容易地弹性盒模型。二、弹性盒...

rozbo 2019-08-28 18:27 评论0 收藏0
弹性盒模型，flex布局

摘要：弹性盒模型弹性盒子是的一种新布局模式，由容器父元素和项目子元素组成。弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒模型弹性盒子是css3的一种新布局模式，由容器（父元素）和项目（子元素）组成。弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒模型的目的：提供一种更加有效的方式...

CoderDock 2019-04-23 11:54 评论0 收藏0
弹性盒模型冷门知识

摘要：可以出现居中的，两边元素分别为弹性盒模型中的标签可能会出现默认宽度，并且不可以用覆盖，只能设置为类似以下结构的有一定高度这个容器占据下部剩余空间这个容器在左边作为目录这个容器是一个搜索栏这里理论上是剩余空可以出现居中的border，两边元素分别为49.5px a b 弹性盒模型中的input标签可能会出现默认宽度，并且不可以用fle...

DevYK 2019-08-30 15:52 评论0 收藏0
弹性盒模型

摘要：弹性盒模型相比传统的盒模型，可以更加简单的实现各种布局页面简单举一个例子，代码如下加上厂商前缀，目前使用方式都有三种写法，旧的，过度的，新的的属性假如的改成也能实现数字的垂直居中弹性盒模型相比传统的盒模型（display+position+float），可以更加简单的实现各种布局页面简单举一个例子，代码如下 1 2 3 css .row{width:200px;...

BakerJ 2019-08-30 12:52 评论0 收藏0
弹性盒模型flex

摘要：一是的缩写，意为弹性布局定义弹性布局二基本定义我只简单的说一下容器和项目，因为只关系容器和项目来讲的个人理解。它可以设为或属性一样的值，则该项目占据固定的空间。默认值为，表示继承夫元素的属性，如果没有夫元素，则等同于。一、flex flex是flexible box的缩写，意为弹性布局；定义弹性布局 display:flex; box{ display:flex; } 二...

Gemini 2019-04-23 11:53 评论0 收藏0