Php弹性盒子属性,CSS 弹性盒子（flexbox）常用的的容器属性与项目属性介绍

一、弹性盒子(flexbox)一些基本术语和简单介绍介绍

CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内，或垂直框在水平框内)可以在两个维度上构建布局。

术语

容器: 具有display:flex属性元素，任何元素都可以通过添加display:flex;属性，转换为弹性盒元素,转换为 flex 元素后，它的内部的“子元素”就支持 flex 布局了。

项目: flex 容器的”子元素”，容器中的项目自动转为行内块元素，不管之前是什么类型。

主轴: 项目排列的轴线，一般默认情况下主轴为水平方向。

交叉轴: 与主轴垂直的轴线，一般默认情况下，交叉轴为竖直方向。

二、 常用的容器属性属性

描述

flex-flow

主轴方向与换行方式

justify-content

项目在主轴上的对齐方式

align-items

项目在交叉轴上的对齐方式

align-content

项目在多行容器中的对齐方式

1.flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写

flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向。它的默认值是row，默认水平方向为主轴。

flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。它的默认值是nowrap，默认是不允许换行显示。

具体演示如下：

html 代码

flex-flow属性演示

元素块1