flex布局表示弹性布局,为盒状模型提供最大的灵活性。
容器中的 主轴 和 交叉轴 在容器中默认有水平的主轴和垂直的交叉轴,项目在容器中默认沿主轴排列
flex-direction 属性 flex-direction 属性设置容器主轴的方向 .wrap{ flex-direction:row | row-reverse | column | column=reverse; } //示例代码 <div class="wrap"> <div class="red-item item"></div> <div class="green-item item"></div> <div class="blue-item item"></div> </div>
flex-wrap属性 flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。 nowrap:表示不换行 wrap:正常换行,第一个位于第一行的第一个 wrap-reverse:向上换行,第一行位于下方
justify-content 属性 .wrap{ justify-content: flex-start | flex-end | center |space-between | space-around }
align-items 属性 align-items定义了项目在交叉轴上(上->下)是如何对齐显示的 flex-start:交叉轴的起点对齐 flex-end 交叉轴的终点对齐
stretch:默认值:如果项目未设置高度或者高度为auto,将占满整个容器的高度
flex属性 子元素在主轴上划分空间
align-self
属性
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。
默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
01. 媒体查询 作用: 感受到屏幕的变化;可以根据屏幕不同的宽,从而获得不同的样式,然后实现不同的样式显示;
使用的话可以放在 <style> 中 ,也可以引用
02. rem rem是一个相对单位,类似于em,:让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候
less的使用: 安装 Easy Less插件 你可以根据他写一个.less文件 在里面写Html语言 然后生成一个CSS 这样你就不用自己计算XX/XXrem了,在主要页面中引入CSS就好了
<link href="css/bootstrap.min.css" rel="stylesheet"> 布局容器
按钮: <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit" 辅助类: 上下文颜色 p class="text-muted">...</p> <!-- 下拉三角 --> <span class="caret"></span> 字体图标 <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 栅格系统: 栅格系统,在各个档位下,控制子元素布局不同;将版心宽度均分为12份; <!-- 中屏和以上占有6份 --> <div class="container"> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> <!-- 各个档位下,按照各个档位下布局 --> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-4">1</div> <div class="col-md-6 col-lg-8">2</div> </div> </div> 列偏移:
列嵌套:
可见性: