首先
display: flex;
flex可去除块级元素的块级特性
flex都是对子元素布局的
主轴、交叉轴
flex-direction: row; //横向
主轴为水平方向（从左向右），交叉轴为垂直于主轴方向
flex-direction: row-reverse; //横向
主轴为水平方向（从右向左），交叉轴为垂直于主轴方向
flex-direction: column; //纵向
主轴为竖直方向（从上向下），交叉轴为垂直于主轴方向
flex-direction: column-reverse; //纵向
主轴为竖直方向（从下向上），交叉轴为垂直于主轴方向
常用属性 、属性值
justify-content ： 作用于主轴上
align-items：作用于交叉轴上
常用值：
center ： 居中
space-around：等边距
baseline： 基线对齐
space-between： 等距
换行
flex-wrap
wrap：换行
nowrap：不换行
认识flex布局 flex布局（Flexible 布局，弹性布局）开启了flex布局的元素叫flex contai...
FLEX布局 一种新的布局方式，flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...
一、Flex 布局教程：语法篇 Flex 布局教程：语法篇 二、Flex 布局教程：实例篇 Flex...
css flex布局详解 css flex布局详解1css flex布局详解2
阮一峰-Flex布局 阮一峰-Flex布局实例教程 Flex布局 块级元素 行内元素 注意，设为 Flex 布局...
经典教程 Flex 布局教程：语法篇Flex 布局教程：实例篇flex布局游戏 理解 flex布局实现需要至少两层...
Flex，(Flexible Box），意为"弹性布局"采用 Flex 布局的元素，为 Flex 容器（flex ...
css flex布局 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器...
一、介绍Flex布局 什么是Flex布局呢？Flex布局：又称弹性布局，它是Flexible Box 的缩写，它为...
一、flex布局介绍： 1、又名Flexible 布局，弹性布局；2、开启了 flex 布局的元素叫 flex c...
本文标题：flex布局
本文链接：https://www.haomeiwen.com/subject/wznyfqtx.html
网友评论