css3弹性盒子

css3的一种新的布局模式

主要记录盒子自身样式与子元素样式

弹性盒子样式

属性名称	属性功能	属性值	例子
display	设置弹性盒子类型	flex,inline-flex	display:flex
flex-direction	设置伸缩盒的起点与终点位置	row, row-reverse, column, column-reverse	flex-direction:column
flex-wrap	子元素宽度超出时是否换行	nowrap, wrap, wrap-reverse	flex-wrap:wrap
justify-content	子元素横向对齐方式	flex-start, flex-end, center, space-between, space-around	justify-content:space-around
align-items	子元素在侧轴方向上的对齐方式	flex-start, flex-end, center, baseline, stretch	align-items:center
align-content	子元素纵轴的对齐方式	flex-start, flex-end, center, space-between, space-around, stretch	align-content:space-around

弹性盒子内部样式

属性名称	属性功能	属性值	例子
flex-grow	多出的空间兄弟节点侵分比例	默认值0	flex-grow: 1;
flew-shrink	超出的空间压缩比例¹	默认值1	flex-shrink:2;
flex-basis	父容器为弹性盒子时自己的宽度基准	默认值auto	flex-basis:1
flex	上面三个的复合属性	1，auto,none	flex:1
order	弹盒子元素出现顺序	数值	order:1
align-self	自身在纵轴上的对齐方式	auto, flex-start, flex-end, center, baseline, stretch	align-self:center

媒体查询

根据不同的访问，呈现出不同的效果

语法一

@media 媒体类型 and|not|only （媒体条件）{样式代码
}例子：
@media screen and (min-width:1200px){body{background:red;}
}
@media screen and (max-width:75rem) {body{background: beige;}
}

语法二

<link rel='stylesheet' media='媒体类型 and|not|only (条件）' href='样式文件.css'>

flew-shrink的算法
一，超出空间：内部所有子容器宽度之和-外部容器的宽度
二，加权总和：子容器1宽度它的flew-shrink值+其它容器的这个数据
三，子容器被移除的值：子容器的宽度flew-shrink/加权总和
四，子容器的最终宽度：子容器原始宽度-子容器被移除的值
五，例子 ↩︎

前端知识笔记汇总200304相关推荐

前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序）
前端知识总结汇总!(HTML.CSS.JS.jQuery.vue.微信小程序) 前端理论考核题 1 / HTML 1.DOCTYPE 的作用是什么?标准模式与兼容模式各有什么区别? !DOCTYPE是 ...
html是如何实现独占一行原理,前端知识(Html)汇总1
一. 了解前端 1. 什么是前端前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏 ...
设置层级为2html,前端知识(Css)汇总2
三. CSS介绍 1.为了让网页元素的样式更加的丰富, 也为了让网页的内容和样式能拆分开, CSS由此而诞生. 2.CSS是 Cascading Style Sheets 的首写字母缩写,意思是层 ...
前端基础知识整理汇总（中）
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
前端基础知识整理汇总（上）
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...
Web前端知识技能大汇总
Web前端知识技能大汇总来源:github 发布时间:2015-07-08 阅读次数:3432 28 项目起源还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们 ...
前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
历时8个月，10w字！前端知识体系+大厂面试笔记（工程化篇）
前言本文是10w字前端知识体系+大厂面试总结的第三篇其余3篇为基础知识篇.算法篇.前端框架和浏览器原理篇,如果还没有阅读,建议了解下工程化目的是为了提升团队的开发效率.提高项目的质量例如 ...
金融市场基础知识-全书读书笔记汇总
金融市场基础知识-全书读书笔记汇总参考: https://mp.weixin.qq.com/s?__biz=MzUxNDc2ODk1Mw==&mid=2247484311&idx=1 ...

前端知识笔记汇总200304

css3弹性盒子

弹性盒子样式

弹性盒子内部样式

媒体查询

前端知识笔记汇总200304相关推荐

最新文章

热门文章