css-flex布局属性

flex 布局的优势

  1. flex 布局的子元素不会脱离文档流
  2. flex 是一种现代的布局方式,是 W3C 第一次提供真正用于布局的 CSS 规范

弹性盒子、子元素

  1. 弹性盒子:指的是使用 display:flexdisplay:inline-flex 声明的父容器
    • 声明:使用 display:flexdisplay:inline-flex 声明的父容器
    • flex-direction 属性
      • row:从左到右水平排列子元素
      • column:从上到下水平垂直子元素
      • row-reverse:从右到左水平排列子元素
      • column-reverse:从下到上水平垂直子元素
    • flex-wrap 属性:控制子元素溢出时换行处理
    • justify-content 属性:控制子元素在主轴上的排列方式
  2. 子元素/弹性元素:指的是父容器里面的子元素们
    • justify-content 属性:主轴上的对齐方式
      • flex-start:从主轴的起点对齐
      • flex-end:从主轴的终点对齐
      • center:居中对齐
      • space-around:在父盒子里平分
      • space-between:两端对齐平分
    • align-items 属性:侧轴上的对齐方式
      • flex-start:从侧轴开始的方向对齐
      • flex-end:从侧轴结束的方向对齐
      • baseline:基线 默认同flex-start
      • center:中间对齐
      • stretch:拉伸

主轴和侧轴

  1. 主轴:flex容器的主轴,默认是水平方向,从左向右
  2. 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向,从上往下
相关推荐
迈火21 分钟前
PuLID_ComfyUI:ComfyUI中的图像生成强化插件
开发语言·人工智能·python·深度学习·计算机视觉·stable diffusion·语音识别
wzg201623 分钟前
vscode 配置使用pyqt5
开发语言·数据库·qt
板鸭〈小号〉2 小时前
Socket网络编程(1)——Echo Server
开发语言·网络·php
明天会有多晴朗2 小时前
C语言入门教程(第1讲):最通俗的C语言常见概念详解与实战讲解
c语言·开发语言·c++
华仔啊2 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel2 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴2 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
excel2 小时前
Vue3 响应式核心源码全解析:Dep、Link 与 track/trigger 完整执行机制详解
前端
gopher95113 小时前
Go 语言的 panic 和 recover
开发语言·golang
前端大卫3 小时前
一个关于时区的线上问题
前端·javascript·vue.js