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:指定子元素如何分配空间

相关推荐
码哥DFS15 分钟前
Flex布局原理
前端·css·css3
小样还想跑31 分钟前
axios无感刷新token
前端·javascript·vue.js
Java水解40 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户3802258598241 小时前
vue3源码解析:响应式机制
前端·vue.js
bo521001 小时前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员1 小时前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
山有木兮木有枝_1 小时前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子1 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a1 小时前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心1 小时前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试