flex布局属性

flex换行

    flex-direction

  作用：子元素在父元素盒子中的排列方式

  row（从左到右）row-reverse

  column(从上到下) column-reverse

  注意：如果只设置display:flex 默认row布局方式

  flex-wrap

  作用：子元素在父元素盒子中 是否换行（列）

  nowrap默认值 不换行或者不换列

  warp 换行或换列

  flex-flow 属性的简写

  语法 flex-flow:flex-direction(排列方式) flex-wrap(换行方式)

display:flex：设置弹性盒子(元素内内容以弹性布局方式)

• 在flex弹性布局中 父元素宽度不够显示情况下 子元素会自动压缩等分显示
  

flex-direction：子元素在父元素盒子中的排列方式

flex-wrap：子元素在父元素盒子中是否换行/列

• 在父元素宽度不够时会换行显示 而不会自动压缩等分显示

flex-flow：flex-direction(设置排列方式)与flex-wrap(设置是否换行)属性的简写形式

弹性盒子css写法

Display:flex;

Flex-flow:row wrap;

flex-direction：改变子元素在父元素中的排列方式（要先在父元素的样式中添加displace：flex，把父元素布局变成盒子模式）

如果没有设置换行，当子元素的宽度超过了父元素的宽度，会自动压缩子元素的宽度，但子元素必须设置宽度

flex-wrap：子元素是否换行

flex-flow：<flex-direction> || <flex-wrap>，具体写法见代码截图

子元素在父元素盒子中的排列方式

display：felx；

flex-direction：column；

flex-wrap：子元素在父元素盒子中是否换行wrap

flex-flow：row wrap；

在父元素中设置，子元素受之影响

是否换行 排列方向  简写

flex-direction  

作用：子元素在父元素盒子中的排列方式

row (从左到右） row-reverse column（从上到下）column-reverse

注意：如果只设置display:flex  默认row布局方式

flex-wrap

作用：子元素在父元素盒子中 是否换行（列）

nowrap 默认值 不换行或不换列

warp  换行或换列

flex-flow  书写上述两个属性的简写形式

语法 flex-flow:flex-direction（排列方式）  flex-wrap(换行方式)；

flex-flow

作用：flex-direction和flex-wrap属性的简写形式

语法：flex-row：<flex-direction> || <flex-wrap>

flex-wrap

作用：子元素在父元素盒子中的是否换行（列）

flex-flow相当于 flex-direction和flex-wrap

父容器的宽度不够，子元素自动压缩

flex-flow 的效果.

flex-direction 属性.

flex-directinon决定了弹性盒子中子元素显示的方向

row:默认值，按从左到右的顺序显示。

row-reverse:与row相同，但是以相反的顺序显示。

column:灵活的项目将垂直显示，按从上到下的顺序。

column-reverse：与column相同，但是以相反的顺序。

如果父元素的宽度不够子元素进行分配，子元素会自动压缩显示。

如果子元素没有设置宽度的值，那么子元素就会按找父元素自己的分配方式进行分配

flex-wrap子元素在父元素盒子中是否换行（列）

nowrap:默认值，不换行或不换列

wrap:换行或换列

wrap-reverse:换行或者换列，但是子元素显示的顺序为反的

flex-wrap:row wrap排列方向，是否换行

flex-flow是下面两属性的缩写写法

flex-wrap: nowrap / wrap / wrap-reverse

默认值，不换行或不换列 、换行或换列、换行或换列，但以相反的顺序。

flex-direction:row / row-reverse / column / column-reverse
从左到右，从右到左，从上到下，从下到上

4. 一键删除账户名/密码

这个功能是给用户在注册登录页面输入有误或是切换账户时使用，可以有效减少用户的点击次数，提升用户体验。

在windows上也可以