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

文章目录

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

Flex盒模型

1、普通盒模型

2、弹性盒布局

使用弹性盒布局能让容器的宽度跟随浏览器窗口的变化而变换

二、常见属性

2.1 flex属性

2.2 justify-content

2.3 flex-wrap

2.4 flex-flow

这是一个简写flex-direction和flex-wrap属性。共同定义了flex容器的主轴和交叉轴。默认是row nowrap。

2.5 align-items

2.6 父容器-align-content

相关推荐
你的人类朋友1 小时前
✍️记录自己的git分支管理实践
前端·git·后端
合作小小程序员小小店2 小时前
web网页开发,在线考勤管理系统,基于Idea,html,css,vue,java,springboot,mysql
java·前端·vue.js·后端·intellij-idea·springboot
防火墙在线2 小时前
前后端通信加解密(Web Crypto API )
前端·vue.js·网络协议·node.js·express
Jacky-0082 小时前
Node + vite + React 创建项目
前端·react.js·前端框架
CoderYanger3 小时前
前端基础——CSS练习项目:百度热榜实现
开发语言·前端·css·百度·html·1024程序员节
i_am_a_div_日积月累_3 小时前
10个css更新
前端·css
倚栏听风雨3 小时前
npm命令详解
前端
用户47949283569153 小时前
为什么我的react项目启动后,dom上的类名里没有代码位置信息
前端·react.js
键盘飞行员4 小时前
Vue3+TypeScript项目中配置自动导入功能,遇到了问题需要详细的配置教程!
前端·typescript·vue
han_4 小时前
前端高频面试题之Vue(初、中级篇)
前端·vue.js·面试