首页 前端知识 html中关于display值以及display:flex弹性布局

html中关于display值以及display:flex弹性布局

2024-03-01 12:03:26 前端知识 前端哥 902 281 我要收藏

个人觉得相对于用float浮动布局(浮动布局一般适用于文字环绕)弹性布局会更加方便简洁而且强大(这是一篇长长的文章,前前面是值以及属性表,后面是各个属性的效果图)

一、属性及其值

属性

描述与值

display

指定 HTML 元素盒子类型:

  1. none: 表示此元素不会被显示。
  2. block: 元素将显示为块级元素,前后会带有换行符。
  3. Inline:元素会被显示为内联(行内)元素,元素前后没有换行符
  4. inline-block: 行内块元素。
  5. list-item: 元素会作为列表显示

flex-direction

指定了弹性容器中子元素的排列方式

  1. row(默认值):水平方向排列,起点在左端。
  2. row-reverse:反向水平排列,起点在右端。
  3. column:纵向垂直排列,起点在上方。
  4. column-reverse:反向纵向垂直排列,起点在下方。

justify-content

设置弹性盒子元素在主轴(水平排列是x轴,垂直排列是y轴)方向上的对齐方式:

  1. flex-start(默认值):左对齐
  2. flex-end
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2998.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!