菜鸟：
https://www.runoob.com/css3/css3-flexbox.html
https://www.bilibili.com/video/av18495093?from=search&seid=7112996000908205860
https://www.bilibili.com/video/av18917955/?spm_id_from=333.788.videocard.0
https://caniuse.com 查看css的兼容情况
目标
- box-sizing
- calc(了解一下)
- 弹性盒子/父级disply:flex;justify-content;align-items;flex-direction;flex-wrap
-弹性盒子/子级 flex|flex-grow|flex-shrink|align-self
box-sizing
box-sizing：content-box|border-box
content-box普通盒子 加上border padding属性后，盒子会变大 向外扩展
border-box:新型盒子 加上border padding属性后，盒子不会变大 向内扩展
替换下例中的box-sizing属性值看盒子的大小.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.content{
width: 300px;
height:300px;
/* 弹性盒子 content-box传统盒子 border-box内填充*/
box-sizing:border-box;
padding:10px ;
background-color: aqua;
border:5px solid #000;
}
</style>
<script>
window.onload=function(){
var con=document.querySelector(".content");
alert(con.offsetWidth);
}
</script>
</head>
<body>
<div id="content" class="content">
</div>
</body>
</html>
弹性盒子
disply:flex;
display: flex如果父级用了弹性布局，子元素不需要浮动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.parent{
width: 500px;
height: 500px;
border:1px solid #000000;
display: flex;
}
.child{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"> 1111
</div>
<div class="child"> 2222
</div>
<div class="child"> 3333
</div>
</div>
</body>
</html>
此时的效果
image.png
justify-content子元素主轴居中
添加justify-content: center;
.parent{
width: 500px;
height: 500px;
border:1px solid #000000;
display: flex;
justify-content: center;
color: #000000;
}
此时的效果
image.png
justify-content其他值：
justify-content:center居中对齐 （常用）
justify-content:flex-start 属左
justify-content:flex-end 属右
justify-content:space-around 每个子元素拉手分布（常用）
justify-content:space-between 两端对齐（常用）
align-items子元素侧轴对齐方式
align-items:center居中|flex-start顶部|flext-end 底部 其他值不常用
排列方式flex-direction
flex-direction:row横向|column纵向|row-reverse横向翻转|column-reverse纵向翻转
希望了解一下主轴的概念
flex-wrap包裹
子元素是否在一行显示
flex-wrap：wrap换行|no-wrap不换行，如果宽度超出，自动缩小
align-content多行时的侧轴排列方式
align-content:center|flex-start|flex_end|stretch拉伸
以上是弹性盒子的父级属性
弹性盒子子级也可以设置属性
flex
flex:1 1是系数，占几份 这时设置宽度就没有用了 可以自动做宽度分配，常见做导航时导航项目动态变化
image.png
对应代码 ：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent{
width: 100%;
height: 120px;
border: 1px solid #008000;
/*flex布局*/
display: flex;
justify-content: flex-start;
}
.child01{
flex:1;
height: 100px;
border:1px solid #808080;
}
.child02{
flex:4;
height: 100px;
border:1px solid #808080;
}
</style>
</head>
<body>
<div class="parent">
<div class="child01">
</div>
<div class="child02">
</div>
</div>
</body>
如果各子项的flex都为1,就可以实现可自动扩充的菜单项
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent {
width: 100%;
height: 120px;
border: 1px solid #008000;
/*flex布局*/
display: flex;
justify-content: flex-start;
}
.child {
flex: 1;
height: 36px;
border: 1px solid #808080;
background-color: #8A2BE2;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
首页
</div>
<div class="child">
产品介绍
</div>
<div class="child">
聯系我
</div>
<div class="child">
other
</div>
</div>
image.png
以下了解flex-basis flex-grow flex-shrink
flex-basis:主要成分，我优先（width遇到这个遇到他，width失效）
flex-grow：各子类加一起不能够占满父类，余下的财产怎么分（富的家庭分余下财产）
flex-shrink：父类给子类分不够的情况下，各子类如果紧缩（贫穷的）
flex-grow
flex-grow是设置剩余空间怎么分，按正常宽度分配后，剩余空间我占几份
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent{
width: 750px;
height: 120px;
border: 1px solid #008000;
/*flex布局*/
display: flex;
/* 水平对齐方式
flex-start 从左到右 左对齐
flex-end 从右到左 右对齐
space-around 平均分布，两侧有间距，两侧间距是中间的1/2 拉手布局
space-between 平均分布，两侧无间距 */
justify-content: space-around;
align-items: flex-start;
}
.child01{
width:100px;
height: 100px;
border:1px solid #808080;
/* flex-grow设置剩余空间怎么分*/
flex-grow:2 ;
}
.child02{
width:100px;
height: 100px;
border:1px solid #808080;
flex-grow:1 ;
}
.child03{
width:100px;
height: 100px;
border:1px solid #808080;
}
</style>
</head>
<body>
<div class="parent">
<div class="child01">
</div>
<div class="child02">
</div>
<div class="child03">
</div>
</div>
</body>
flex-shrink
flex-shrink是设置不够的空间缩小的比例.flex-shrink默认为1
align-self
各子项的对齐方式
在弹性子元素上使用。覆盖容器的 align-items 属性。
宽高自适应
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.layout{
width: 100%;
height: 768px;
background-color: #808080;
display: flex;
/*纵向排列 */
flex-direction: column;
}
header{
width: 100%;
height: 60px;
background-color: red;
}
footer{
width: 100%;
height: 80px;
background-color: #8A2BE2;
}
/* main也是伸缩盒子*/
main{
width: 100%;
background-color: #008000;
/*占据余下空间 */
flex:1;
display: flex;
}
main > article{
height:100%;
flex:1;
background-color: #EEEEEE;
}
main > aside{
height:100%;
flex:3;
background-color: #FFA500;
}
</style>
</head>
<body>
<div class="layout">
<header></header>
<main>
<article></article>
<aside></aside>
</main>
<footer></footer>
</div>
</body>
网友评论