CSS3学习之01

box-sizing:

border-box:width是整体的大小

content-box:width是内容区大小

flex box弹性布局

弹性布局子元素通常在同一行内显示。

flex-direction:布局内子元素的排列方式

row:默认从左到右

row-reverse:从右到左

column:从上到下

column-reverse:从下到上

justify-content属性

内容对齐:把弹性元素沿着弹性容器的主轴线对齐。

fiex-start-默认值-左对齐

flex-end-右对齐

center:居中

space-between:左右对齐

space-around:均分

align-items

flex-start:

flex-wrap:指定弹性盒子的子元素换行方式

nowrap:默认,弹性容器为单行,该情况下弹性子项可能会溢出容器

wrap:多行,溢出的部分会放置到新行

wrap-reverse:反转

initial

inherit

flex:指定子元素如何分配空间

相关推荐
zwjapple6 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
DKPT6 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem9 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
好好研究9 小时前
学习栈和队列的插入和删除操作
数据结构·学习
why技术9 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing9 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止9 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall9 小时前
npm install安装的node_modules是什么
前端·npm·node.js