随笔分类 - flex
flex布局
摘要：设置外层盒子flex 显示宽度为自己盒子本身宽度 高度被拉高整个盒子 设置为垂直方向的对齐方式 align-items:flex-start 盒子不将被拉伸 显示元素本身的高度 align-items:center 盒子不将被拉伸 显示元素本身的高度 align-items:stretch 元素拉伸
阅读全文
摘要：<style>#main { width: 220px; height: 300px; border: 1px solid black; display: -webkit-flex; /* Safari */ -webkit-align-items: flex-start; /* Safari 7.
阅读全文
摘要：1、order 属性定义项目的排列顺序 .item { order: <integer>; } 2、flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大 .item { flex-grow: <number>;; /* default 0 */ } 3、flex-sh
阅读全文
摘要：1,align-items: flex-start; 2,align-items: flex-end; 2,align-items: center; 2,align-items: baseline; 2,align-items: stretch;
阅读全文
摘要：FLEX justify-content 属性项目在主轴上的对齐方式 1,justify-content: flex-start 2,justify-content: flex-end 3,justify-content: center 4,justify-content: space-betwee
阅读全文
摘要：内容大于盒子宽度 <style type="text/css"> .bigbox{ width: 500px; height: 400px; background:#ff0000; display: flex; flex-direction: row; flex-wrap: nowrap } .sm
阅读全文
摘要：1，如何让盒子元素横轴排列 flex-direction: row //默认是横轴 flex-direction: row-reverse flex-direction: column flex-direction: column-reverse <style type="text/css"> .b
阅读全文
摘要：1.Flex布局 display:flex .bigbox{ width: 500px; height: 400px; background:#ff0000; display: flex; } .smallbox{ width: 100px; height: 100px; background: #
阅读全文
