• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    全面了解flex的用途

    一、可以利用flex来布局一个div在另一个div里面水平垂直居中

    如:html代码: 

    div class="container">
    	div class="box">
    
    	/div>
    	/div>

    css代码:

    .container{
    	width:600px;
    	height:400px;
    	border:1px solid blue;
    	display: flex;
    	justify-content:center;
    	align-items:center;
    	}
    	.box{
    	width:200px;
    	height:100px;
    	border:1px red solid;

    ps:这样就可以水平垂直居中咯

    二、flex的属性

    div class="items">
    	div class="item">1/div>
    	div class="item">23/div>
    	div class="item">4/div>
    	/div>

    可以写在items上的属性有六个:

    •flex-direction
    •flex-wrap
    •flex-flow
    •justify-content
    •align-items
    •align-content

    可以写在item上的有6个:

    •order//这个就是item单独给了,要是想让那个item调换顺序就给这个属性给那个item
    •flex-grow
    •flex-shrink
    •flex-basis
    •flex
    •align-self

    以上就是小编为大家带来的全面了解flex的用途全部内容了,希望大家多多支持脚本之家~

    您可能感兴趣的文章:
    • Flex 获取每月第几周小例子
    • Flex 遍历Object键和值的示例代码
    • Flex DataGrid 伪合并单元格实现思路
    • Flex 自定义DataGrid实现根据条目某一属性值改变背景颜色
    • Flex4 DataGrid中嵌入RadioButton实现思路及代码
    • flex 遍历Object对象内容的实现代码
    上一篇:Flex中对表格某列的值进行数字格式化并求百分比添加%
    下一篇:Flex Label自动截取、自动换行代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    全面了解flex的用途 全面,了解,flex,的,用途,