交叉轴

容器属性 flex-direction 属性 决定主轴的方向。 有 4 个可选值 : row （默认值）：主轴为水平方向，起点在左端。 row-reverse ：主轴为水平方向，起点在右端。 column ：主轴为垂直方向，起点在上沿。 column-reverse ：主轴为垂直方向，起点在下沿。 flex-wrap 属性 决定一条轴线排不下，如何换行。 有 3 个可选值 : nowrap （默认）：不换行。 wrap ：换行，第一行在上方。 wrap-reverse ：换行，第一行在下方。 justify-content 属性 决定项目在主轴上的对齐方式 有 5 个可选值 : flex-start （默认值）：左对齐 flex-end ：右对齐 center ： 居中 space-between ：两端对齐，项目之间的间隔都相等。 space-around ：每个项目两侧的间隔相等。 align-items 属性 决定项目在交叉轴上如何对齐 有 5 个可选值 : flex-start ：交叉轴的起点对齐。 flex-end ：交叉轴的终点对齐。 center ：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch （默认值）：如果项目未设置高度或设为 auto ，将占满整个容器的高度。 align-content 属性 决定多根轴线的对齐方式 有

Flex是什么 Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 display: inline-flex; Webkit内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 设为Flex布局，子元素的float、clear和vertical-align属性将失效。 基本概念 采用Flex布局的元素，称为Flex容器，简称“容器”，它的所有子元素自动成为容器成员，称为Flex项目 man axis水平主轴； cross axis垂直交叉轴； main end主轴的结束位置； cross start交叉轴的开始位置；main size单个项目占据的主轴空间；cross size占据的交叉轴空间； main start主轴开始的位置；cross end交叉轴结束的位置； 容器属性： 1、flex-direction 决定主轴的方向（即项目的排列方向）； 默认4个值： row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 2、flex-wrap

flexbox是Flexible Box的缩写，弹性盒子布局 主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。 按照伸缩流的方向布局 伸缩容器有主轴和交叉轴组成！ 主轴既可以是水平轴，也可以是垂直轴 flexbox目前还处于草稿状态，所有在使用flexbox布局的时候，需要加上各个浏览器的私有前缀，即-webkit -moz -ms -o等 ###伸缩容器的属性 1.display display:flex | inline-flex 块级伸缩容器 行内级伸缩容器 2.flex-direction 指定主轴的方向 flex-direction:row（默认值）| row-reverse | column | column-reverse 3.flex-wrap 伸缩容器在主轴线方向空间不足的情况下，是否换行以及该如何换行 flex-wrap:nowrap（默认值） | wrap | wrap-reverse 4.flex-flow 是flex-direction和flex-wrap的缩写版本

一、flexbox弹性盒模型属性 flex布局是一种 一维布局 模型，一次只能处理一个维度（一行或者一列）上的元素布局 1.每个弹性容器都有两根轴： 主轴和交叉轴 ，两轴垂直。PS： 主轴不一定水平。 2.弹性容器中的所有子元素称为<弹性元素>，弹性元素沿 主轴 排列。 3.每根轴都有 起点和终点 ，这对于元素的对齐非常重要。 4.弹性元素也可以通过 display:flex 设置为另一个弹性容器，形成嵌套关系。因此 一个元素既可以是弹性容器也可以是弹性元素 。 二、flex布局 1.元素分布方向 (flex-direction) ： 弹性元素沿只沿着 主轴 排列 　→ flex-direction:row 　　　 ↓ flex-direction:column 　　　← flex-direction:row-reverse 　　　 ↑ flex-direction:column-reverse 2.元素折行方式 (flex-wrap) flex-wrap: nowrap | wrap | wrap-reverse 可使得主轴上的元素不折行、折行、反向折行。 1和2合并写法flex-flow = flex-drection + flex-wrap eg. flex-flow: row nowrap; 三、flex元素大小 1.元素弹性收缩 (flex-shrink)

flex 即为弹性布局。 　　任何一个容器都可以指定为flex布局。 　　　　.box{display:flex} 　　行内元素可以使用flex布局 　　　　.box{display: inline-flex} 　　webkit内核的浏览器必须加上-webkit 前缀。 　　　　.box{display:-webkit-flex; display:flex;} 　　注意：元素设置flex布局以后,子元素得float ,clear 和 vertical-align 属性将失效。 　　基本概念： 　　　　采用flex布局的元素称之为flex容器，它的所有子元素自动成为容器成员，称为flex 　　　　项目。 　　　　容器默认存在两根轴，水平的主轴（main axis） 和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start, 结束位置叫做 main end ； 　　　　　　交叉轴的开始位置叫做cross start,结束位置叫做 cross start,技术位置叫做 cross end. 　　单个项目占据的主轴空间叫做 main size 占据的交叉轴空间叫做cross size. 容器的属性： 　　有6个属性设置在容器上。 　　　　flex-direction 　　 flex-wrap 　　 flex-flow 　　 justify

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上 -webkit 前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意，设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。 二、基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。 三、容器的属性

1，flex布局是个什么东西？ 官方说法：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 民间说法：flex 就是一种布局方式，类似于 block，inline-block等。 2，flex涉及的概念 Flex的基本作用就是让布局变的更简单，比如“垂直居中”等，当然不止这个，要说清楚flex有什么作用首先要了解一些概念。 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 主要记住 “容器”、“项目”、“主轴（横轴）”和“交叉轴（纵轴）”的意思和指向就行。 3，容器的属性 3.1 flex-direction flex-direction 决定主轴的方向（即项目的排列方向）。它有4个可能的值 ： row（默认值）

一、 盒子模型是什么？ Margin ：外边距 Border ：边框线 Padding ：内边距 Content ：内容 二、 边框盒与内容盒有什么区别？分别对应属性是什么？ 1. 边框盒：border-box: border 、padding、content组成 a) 浏览器调试时，页面中显示的元素尺寸是指边框盒的尺寸 b) 元素的背景，默认覆盖边框盒，可通过background-clip属性修改 c) background-clip 属性：含义：背景覆盖范围 不可继承 默认值：border-box 取值：border-box：背景覆盖边框盒 padding-box ：背景覆盖填充盒 content-box ：背景覆盖内容盒 2. 内容盒（content-box）：由content组成 a) 默认情况下，width和height属性，是指内容盒的宽度和高度 b) width 和height的设置范围，可通过box-sizing属性修改 c) box-sizing 属性：含义：盒子宽高的设置范围 不可继承默认值：content-box 取值：content-box：表示内容盒的宽高 border-box ：表示边框盒的宽高 三、 弹性布局如何改变主轴方向？定义项目在主轴的对齐方式有哪些？项目在交叉轴上有哪些对齐方式？ 1) flex-direction 属性决定主轴的方向

㈠什么是弹性盒子？ 弹性盒子是 CSS3 的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 ● 伸缩容器：设置为display:flex或display:inline-flex的元素称为伸缩容器。 ● 伸缩项目：伸缩容器的子元素称为伸缩项目 注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效；弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行 默认情况下伸缩容器存在两根轴，水平的主轴和垂直的侧轴。 ㈡浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。 ㈢基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start

网页布局，是css的一个重要应用。 传统的网页布局，主要是基于盒模型，和display、position、float属性，这些属性的一个优势就是简单，容易理解，但也有一些不方便的地方，比如在实现垂直居中的时候。 2009年，W3C提出了一种新的解决方案：Flex（Flexible Box，弹性布局）布局。 设置为flex布局的容器称为flex容器，flex容器的子元素称为容器项目（flex item）。 将元素设置为flex布局后，子元素的float、clear、vertical-align属性将失效。 Flex布局的一些基本概念 Flex容器默认有两根轴，水平的主轴（main axis）和垂直的交叉轴（cross asix）。主轴的开始位置叫做main start，主轴的结束位置叫做main end。交叉轴的开始位置叫做cross axis，交叉轴的结束位置叫做cross end。 容器项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 Flex容器的一些属性 flex-direction flex-wrap flex-flow justify-content align-items align-content 1.flex-direction：容器的方向 有4个值： row（默认值）：主轴为水平方向，起点在左侧 row