弹性盒子-创新互联
1.弹性盒子/伸缩盒子
成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站设计、做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的齐齐哈尔网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!如果要使用弹性盒子属性,首先要将父级元素变成弹性盒子
Flex-direction 设置伸缩盒子的内部元素的排列方式
Row 从左到右安行排列
Column 从上到下按照列排列
Row-reverse 从右到左按照行排列
Column-reverse 从下到上按照列排列
Flex-shrink 设置弹性盒子的内部元素的收缩方式
注意:所有盒子的默认收缩方式都是1
Flex-grow 设置弹性盒子的扩展比例
注意:所有盒子的默认扩展比率为0
Flex-basis 设置伸缩盒子内部元素的基准值
注意:所有元素默认伸缩基准值为元素的宽度
Flex-wrap 设置伸缩盒子的子元素超出的处理方式
Nowrap 自动收缩子元素以适应盒子
Wrap 超出盒子换到下一行
Wrap-reverse 超出盒子换到上一行
Justify-content 设置伸缩盒子的子元素在水平方向的对齐方式
Flex-start 靠左对齐
Flex-end 靠右对齐
Center 居中对齐
Flex-between 两端对齐
Flex-around 平均分布
如果flex-between和flex-around这两个属性不起作用的话可以换成
Space-between和space-around
Align-items 设置伸缩盒子的子元素的排列方式
Flex-start 在伸缩盒子的左上角排列
Flex-end 在伸缩盒子的左下角排列
Center 在伸缩盒子的中间排列
Baseline 在伸缩盒子的左上角基线排列
Strecth 拉伸所有的子元素同父元素等高
Align-self 针对伸缩盒子中的某个元素单独设置排列方式
Auto 使用默认方式
Flex-start 在伸缩盒子左上角排列
Flex-end 在伸缩盒子的左下角排列
Center 在伸缩盒子的中间排列
Baseline 在伸缩盒子的左上角基线排列
Strecth 拉伸所有的子元素同父元素等高
注意:该属性是在align-items的基础上对某个子元素进行单独设定
该属性的默认方式并不是左上角,而是父级添加的属性
Align-content 设置伸缩盒子的子元素换行后的对齐方式
注意:如果伸缩盒子的子元素没有换行,那么该属性无效
Flex-start 换行内容靠左上角
Flex-end 换行内容靠左下角
Center 换行内容居中显示
Space-between 换行内容在垂直方向的顶部和底部分开
Space-around 各行在弹性盒子容器中平均分布,两端保留子元素和子元素之间间距大小的一半
Strecth 拉伸子元素
Order 设置弹性盒子内的子元素的排列顺序
值为整数
数越小,排列越靠前
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前名称:弹性盒子-创新互联
文章路径:http://myzitong.com/article/cshjjg.html