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. 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向,从上往下
相关推荐
王解2 分钟前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
Learning改变世界4 分钟前
Python快速安装软件包到环境的方案
开发语言·python
齐 飞11 分钟前
MongoDB笔记03-MongoDB索引
前端·数据库·笔记·后端·mongodb
奔波儿灞爱霸波尔奔16 分钟前
杂七杂八之Swagger环境搭建(Java版本)
java·开发语言
chusheng184027 分钟前
Python 三维图表绘制指南
开发语言·python
寰梦34 分钟前
vue前端sku实现
前端·javascript·vue.js
细心的莽夫40 分钟前
JavaWeb学习笔记
java·开发语言·笔记·学习·java-ee·web
爱写代码的小朋友1 小时前
使用 Python 和 OpenCV 实现实时人脸识别
开发语言·python·opencv
Matlab程序猿小助手1 小时前
【MATLAB源码-第208期】基于matlab的改进A*算法和传统A*算法对比仿真;改进点:1.无斜穿障碍物顶点2.删除中间多余节点,减少转折。
开发语言·嵌入式硬件·算法·matlab·机器人
martian6651 小时前
QT开发:掌握现代UI动画技术:深入解析QML和Qt Quick中的动画效果
开发语言·c++·qt·ui