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. 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向,从上往下
相关推荐
湫ccc4 分钟前
Python简介以及解释器安装(保姆级教学)
开发语言·python
小行星1257 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
程序伍六七7 分钟前
day16
开发语言·c++
wkj00112 分钟前
php操作redis
开发语言·redis·php
Lysun00116 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
极客代码17 分钟前
【Python TensorFlow】进阶指南(续篇三)
开发语言·人工智能·python·深度学习·tensorflow
土豆湿23 分钟前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
界面开发小八哥30 分钟前
更高效的Java 23开发,IntelliJ IDEA助力全面升级
java·开发语言·ide·intellij-idea·开发工具
J总裁的小芒果32 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9634 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron