flex弹性盒
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex弹性盒</title></head><style>* {margin: 0;padding: 0;list-style: none;}ul {width: 500px;border: 10px red solid;/*将ul设置为弹性容器，*/display: flex;/*flex-direction指定容器中弹性元素的排列方式row 默认值，弹性元素在容器中水平排列（左向右排列）row-reverse反向，从右向左排列，主轴自右向左column 纵向排列（自上向下）主轴自上向下column-reverse （自下向上）主轴自下向上主轴弹性元素的排列方向称为主轴，侧轴与主轴垂直方向的称为侧轴*/flex-direction: row;}li {width: 200px;height: 100px;background-color: antiquewhite;font-size: 50px;text-align: center;float: left;line-height: 100px;/*弹性元素的特性flex-grow 指定弹性元素伸展的系数-当父元素有多余的空间时，子元素如何伸展父元素的剩余空间会按照比例进行分配，flex-grow: 1;flex-shrink指定弹性元素的收缩系数当父元素的空间不足以容纳所有的子元素时，如果对子元素收缩，等比例收缩*//* flex-shrink: 0;元素3会出来 */flex-shrink: 2;}li:nth-child(2) {background-color: aqua;}li:nth-child(3) {background-color: orange;}</style><body><!-- flex弹性盒,伸缩盒是css中一种新的布局手段，用来代替浮动来完成页面的布局flex是元素具有弹性，让元素跟随页面的大小而改变--弹性容器要使用弹性盒，必须先将一个元素设置为弹性容器我们通过display设置弹性容器display:flex设置为块级的弹性容器,独占一行display:inline-flex设置为行内的弹性容器，不会独占一行--弹性元素弹性容器的（直接！！）子元素是弹性元素（弹性项）li里面的div是后代元素，不是子元素，所以div不是一个元素可以同时是弹性容器和弹性元素--><ul><li><div</div>1</li><li>2</li><li>3</li></ul></body></html>
W3school导航条另一种写法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../css重置样式表/reset.css"></head><style>.nav{width:1210px;height:48px;margin: 0 auto;background-color: #E8E7E3;line-height: 48px;/*设置为弹性容器*/display: flex;}.nav li{/*设置增长系数*/flex-grow: 1;}.nav a{/*变成块元素才能设置大小*/display: block;color: #808080;font-size: 16px;/*文字水平居中*/text-align: center;}.nav a:hover{background-color: #636363;color: #fff;}</style><body><ul class="nav"><li><a href="javascript:;">HTML/CSS</a></li><li><a href="javascript:;">Browser Side</a></li><li><a href="javascript:;">Server Side</a></li><li><a href="javascript:;">Programming</a></li><li><a href="javascript:;">XML</a></li><li><a href="javascript:;">Web Building</a></li><li><a href="javascript:;">Reference</a></li></ul></body></html>
基本属性、
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex弹性盒</title></head><style>* {margin: 0;padding: 0;list-style: none;}ul {width: 800px;border: 10px red solid;/*设置ul为弹性容器*/display: flex;/* flex-direction: column; *//*设置弹性元素是否在弹性容器中是否自动换行nowrap不会自动换行wrap元素会自动换行wrap-reverse院沿着辅轴反方向换行*//* flex-wrap: wrap-reverse; *//* flex-flow:wrap和direction的简写属性 *//* flex-flow: row wrap; *//* justify-content:如何分配主轴上的空白空间主轴上的元素如何排列可选值:flex-start元素沿着主轴的起边排列flex-end元素沿着主轴的终边排列center元素居中排列space-around 空白分配到元素两侧,中间部分是两个距离space-evenly 空白分配到元素的单侧space-between 空白均匀分配到元素的单侧*//* justify-content: center; */}li {width: 200px;height: 100px;background-color: antiquewhite;font-size: 50px;text-align: center;float: left;line-height: 100px;flex-shrink: 0;/*元素会溢出*/}li:nth-child(1) {}li:nth-child(2) {background-color: aqua;}li:nth-child(3) {background-color: orange;}</style><body><ul><li> 1</li><li>2</li><li>3</li></ul></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex弹性盒</title></head><style>* {margin: 0;padding: 0;list-style: none;}ul {width: 800px;height: 800px;border: 10px red solid;/*设置ul为弹性容器*/display: flex;/* align-items:元素在辅轴上如何对齐设置元素间的关系可选值:stretch 默认值，所有元素长度相同 指的是行与行之间，第一行内所有高度相同，但是第一行和第二行就不一定了flex-start元素不会拉伸，沿着辅轴起边对齐flex-end 元素不会拉伸，沿着辅轴终边对齐center 元素不会拉伸，沿着辅轴中间对齐baseline沿着基线对齐(如果字的大小不一样，那么就和flex-start不一样)*//*水平竖直居中方法:justify-content: center;align-items: center;*/align-items: flex-start;/* align-content: 辅轴空白空间的分布 *//* align-content: center; */}li {width: 200px;/* height: 100px; */background-color: antiquewhite;font-size: 50px;text-align: center;float: left;line-height: 100px;flex-shrink: 0;/*元素会溢出*/}li:nth-child(1) {/* align-self:用来覆盖当前弹性元素上的align-items就是可以单独为每一个元素设置属性*/align-self: stretch;}li:nth-child(2) {background-color: aqua;}li:nth-child(3) {background-color: orange;}</style><body><ul><li> 1</li><li>2<div>2</div></li><li>3<div>3</div><div>3</div></li></ul></body></html>
basis flex order
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性元素的样式</title></head><style>* {margin: 0;padding: 0;list-style: none;}ul {width: 800px;height: 100px;border: 10px red solid;/*设置弹性盒*/display: flex;}li {width: 200px;height: 100px;background-color: antiquewhite;font-size: 50px;text-align: center;float: left;line-height: 100px;/* flex-grow: 1; */flex-shrink: 1;/*flex-basis:元素的基础长度指定的是元素在主轴上的基础长度，如果主轴是横向的，则该值指定的就是元素的宽度如果主轴是纵向的，则该值指定的就是元素的高度默认值：auto，表示参考元素自身的高度或者宽度如果传递了一个具体的数值，则以该值为准*/flex-basis: 100px;/*flex可以设置弹性元素所有的样式增长 缩减 基础值initial: 0 1 autoauto 1 1 auto none 0 0 auto弹性元素没有弹性，*/}li:nth-child(1) {/* order:决定弹性元素的排列顺序 order值越大，排的越靠后*/order: 3;}li:nth-child(2) {background-color: aqua;order: 2;}li:nth-child(3) {background-color: orange;order: 1;}</style><body><ul><li> 1</li><li>2</li><li>3</li></ul></body></html>
淘宝的导航条
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝导航条</title></head><style>* {margin: 0;padding: 0;}nav {width: 100%;}/*设置图片的每一行的容器*/.nav-inner {/*设置为弹性容器*/display: flex;justify-content: space-around;/*让两边都有空白*/}.nav-inner .item {width: 18%;/*好处:item不会把所有的空白给它占了*//* background-color: antiquewhite; *//* flex:auto;会让元素增长到 有多大的空白都给它占了 */text-align: center;margin: auto 10px;}.item a{text-decoration: none;color: #333;font-size: 16px;/* text-align: center; 居中不能设置给a，它是设置给块元素，作用给文本元素的*/}.item img {/*设置图片宽度和父元素宽度一样父元素大小变化，图片的大小就变化*/width: 100%;}</style><body><!--创建外层容器--><nav class="nav"><div class="nav-inner"><div class="item"><a href="#"><img src="./picture/tb (1).png" alt=""><span>天猫</span></a></div><div class="item"><a href="#"><img src="./picture/tb (1).png" alt=""><span>外卖</span></a></div><div class="item"><a href="#"><img src="./picture/tb (1).png" alt=""><span>天猫国际</span></a></div><div class="item"><a href="#"><img src="./picture/tb (1).png" alt=""><span>天猫超市</span></a></div><div class="item"><a href="#"><img src="./picture/tb (1).png" alt=""><span>充值中心</span></a></div></div><div class="nav-inner"><div class="item"><a href="#"><img src="./picture/tb (2).png" alt=""><span>飞猪旅行</span></a></div><div class="item"><a href="#"><img src="./picture/tb (2).png" alt=""><span>领金币</span></a></div><div class="item"><a href="#"><img src="./picture/tb (2).png" alt=""><span>拍卖</span></a></div><div class="item"><a href="#"><img src="./picture/tb (2).png" alt=""><span>分类</span></a></div><div class="item"><a href="#"><img src="./picture/tb (2).png" alt=""><span>天猫</span></a></div></div></nav></body></html>
