ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

display 为 flex 的元素

2022-07-03 12:37:16  阅读:33  来源: 互联网

标签:flex 交叉 容器 元素 对齐 display 项目


弹性布局

display:flex的意思是表示弹性布局,它能够扩展和收缩flex容器内的元素,以最大限度地填充可用空间。Flex是Flexible Box的缩写,意为弹性布局,用来为盒装模型提供最大的灵活性。

设置为flex布局以后,子元素的float、clear和vertical-align属性都将失效

它可以用于一下四个方面

  1. 在不同方向排列元素
  2. 重新排列元素的显示顺序
  3. 更改元素的对齐方式
  4. 动态地将元素装入容器

概念

采用Flex布局的元素,成为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,成为Flex项目(flex item),简称"项目"。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

容器的属性

  • justify-content:该属性定义了项目在主轴上的对齐方式有五种取值,具体对齐方式与轴的方向有关。假设主轴为从左到右,效果如下。
  1. flex-start(默认值):左对齐
  2. flex-end:右对齐
  3. center:居中
  4. space-between:两端对齐,项目之间的间隔都相等。
  5. space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

  • align-items:该属性定义项目在交叉轴上如何对齐,五种取值,具体对齐方式与交叉轴的方向有关,假设交叉轴从上到下,效果如下。
  1. flex-start:交叉轴的起点对齐
  2. flex-end:交叉轴的终点对齐
  3. center:交叉轴的中点对齐
  4. baseline:项目的第一行文字的基线对齐
  5. stretch(默认值):如果项目未设置高度或设置为auto,将沾满整个容器的高度

标签:flex,交叉,容器,元素,对齐,display,项目
来源: https://www.cnblogs.com/wsjzhk/p/16439566.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有