css中flex=1,CSS/CSS3 1 flex布局

1 flex布局称弹性盒子 (flex 弹性)

.box {

display: flex;

复制代码

}

2 parent样式

1 flex-direction 主轴方向 (direction 方向)

参数 row | row-reverse | column |column-reverse (row行 column柱)

默认参数 row 横向 左->右 /* flex-direction:row; */

698505d52ea7147d6e90cefc1fbd8bcf.png

rowe-reverse 横向 右->左 /* flex-direction: row-reverse; */

d02928142de7a4b3c63123f260f70909.png

column 纵向 上->下 /* flex-direction: column; */

63dde40961989185e7e9e54190dce455.png

column-reverse 纵向 下->上 /* flex-direction: column-reverse; */

a7399eaef6149e2e0efd80fde7bb2074.png

2 flex-wrap 换行

参数 nowrap | wrap | wrap-reverse

默认参数 nowrap 不换行 /* flex-wrap: nowrap; */

e55a03c991a78129c3ac1da7dbef2d30.png

wrap 超出换行 /* flex-wrap: wrap; */

fc232847f37a9c02ee754013cd8c97a2.png

wrap-reverse 下->上 /* flex-wrap: wrap-reverse; */

1c1ab77136dc5fb40f581c18f14fa274.png

3 flex-flow ---flex-direction 和 flex-wrap 的简写

默认 row nowrap

4 justify-content 横向对齐方式 (justify 使每行排列)

参数 flex-start | flex-end | center | space-between | space-around | space-evenly

(between 之间 around 环绕 evenly 均匀)

默认参数 flex-start 左对齐 /* justify-content: flex-start; */

8883a31a2076310641aefb128bdbda1a.png

flex-end 右对齐 /* justify-content:flex-end; */

67d96588ccc881d34adbc5dca249172c.png

center居中 /* justify-content:center; */

4b9be45a49a6d3138c3015d35a7594dc.png

space-between 两端对齐 间距相等 /* justify-content:space-between; */

6f96d87d89318e266332592c408b6a8f.png

space-around 间距相同 距边框2/1间距 /* justify-content:space-around; */

7420905a91c7208976ff6bd5b8082d41.png

space-evenly 所有间距相同包括 /* justify-content:space-evenly; */

e31d2b0072f98d8a609f0d923d4a7ce6.png

5 align-items 纵向单行对齐方式 (align 排列)

参数 flex-start | flex-end | center | baseline | stretch

(baseline基线 stretch拉长)

默认参数 flex-start 上对齐 /* align-items: flex-start */

3eebd7ba25211bd28d702e5b1d4c06e8.png

flex-end 下对齐 /* align-items:flex-end */

63779b459347d71112d4082b04aaa12c.png

center 垂直居中 /* align-items:center */

25ea3c56f177ada27c8ea13727f9bab2.png

baseline 第一行文字对齐 /* align-items:baseline */

0260b50fa3c4237a76f7e0734c6a68dc.png

strech 如果项目未设置高度 自动100% /* align-items: stretch */

eb94935b11c88c40e4146c7cd486ada2.png

6 align-content 纵向多行对齐方式

参数 flex-start | flex-end | center | space-between | space-around | stretch

默认参数 stretch 填充满 /* align-content: stretch; */

6ccd2de5ca7c519ef9340563b8357889.png

flex-start 上对齐 /* align-content:flex-start */

53952d934da486a1215ab936043e91b2.png

flex-end 下对齐 /* align-content: flex-end; */

306cbe708491b4710094d17698456faa.png

cneter 居中 /* align-content: center; */

a95326c663319b63811c94c4e8742ed7.png

space-between 上下对齐 /* align-content: space-between; */

dc1c03a596a774d4a3146595a9241659.png

space-around 间距相同 距边框2/1间距 /* align-content: space-around; */

bfdada25de5bc32d79a8d0d2363ef1d9.png

3 children样式

1 order 排列顺序 (order顺序)

参数 整数

越小的越靠前

2 flex-grow 剩余空间分配 (grow扩大)

参数 数字 0宽度不变 1分配1份 2分配2份

2d40615d82079ab5dd66c8f92a62ece3.png

3 flex-shrink (shrink收缩)

参数 数字 0 宽度不变 1 减小1份 2 减小2份

f79853da7713f2060aa0d117a26dbe76.png

4 flex-basis 分配空间之前 占用的宽度 (basis基础)

参数 auto | px

5 flex ---flex-grow flex-shrink flex-basis 的简写

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值