第二章:CSS基础进阶-part3:弹性例子布局

文章目录

  • Flex盒模型
  • 二、常见属性
    • 2.1 flex属性
    • 2.2 justify-content
    • 2.3 flex-wrap
    • 2.4 flex-flow
    • 2.5 align-items
    • 2.6 父容器-align-content

Flex盒模型

1、普通盒模型
第二章:CSS基础进阶-part3:弹性例子布局_第1张图片
2、弹性盒布局
使用弹性盒布局能让容器的宽度跟随浏览器窗口的变化而变换
第二章:CSS基础进阶-part3:弹性例子布局_第2张图片

二、常见属性

第二章:CSS基础进阶-part3:弹性例子布局_第3张图片

2.1 flex属性

第二章:CSS基础进阶-part3:弹性例子布局_第4张图片

2.2 justify-content

第二章:CSS基础进阶-part3:弹性例子布局_第5张图片

2.3 flex-wrap

第二章:CSS基础进阶-part3:弹性例子布局_第6张图片

2.4 flex-flow

这是一个简写flex-direction和flex-wrap属性。共同定义了flex容器的主轴和交叉轴。默认是row nowrap。
在这里插入图片描述

2.5 align-items

第二章:CSS基础进阶-part3:弹性例子布局_第7张图片

2.6 父容器-align-content

第二章:CSS基础进阶-part3:弹性例子布局_第8张图片

你可能感兴趣的:(Web前端自学教程,css,前端)