ECOS百科全书|高级搜索|RSS订阅|加入收藏|服务中心|联系我们欢迎您光临!

flex布局

来源: 发布时间:2018-05-21 11:12 字体:【   点击次

nba新闻 www.p5vjo.com.cn Flex布局使用

.box{
    display:flex;
}


容器属性

    flex-direction

    flex-wrap

    flex-flow

    justify-content

    align-items

    align-content


1、flex-direction属性

    flex-direction属性决定内容排列

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row(默认值):主轴为水平方向,起点在左端。

  • row-reverse:主轴为水平方向,起点在右端。

  • column:主轴为垂直方向,起点在上沿。

  • column-reverse:主轴为垂直方向,起点在下沿。




2、flex-wrap属性

     内容在一条轴线上排列不了是否换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(默认值):不换行。

wrap:换行,第一行在上方。

wrap-reverse:换行,第一行在下方。


3、justify-content属性

    定义内容在主轴上的对其方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
  • flex-start(默认值):左对齐

  • flex-end:右对齐

  • center: 居中

  • space-between:两端对齐,项目之间的间隔都相等。

  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。



4、align-items属性

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start:交叉轴的起点对齐。

  • flex-end:交叉轴的终点对齐。

  • center:交叉轴的中点对齐。

  • baseline: 项目的第一行文字的基线对齐。

  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。



------分隔线--------

关键词:css3,flex布局,css

转载请保留://www.p5vjo.com.cn/html/jszx/article-2826.html

------分隔线--------
尚未注册畅言帐号,请到后台注册
  • 乌鲁木齐市文庙特色活动庆端午 2019-05-24
  • 北京进入旅游旺季 警察提示游客需防揽客者连环设套忽悠购物 2019-05-23
  • 注意了!报考这个专业须先参加面试 2019-05-23
  • 请问版主,我说计划经济和市场经济的帖子,怎么就要进退稿箱呢?中国吃市场经济的亏,还不多么?! 2019-05-23
  • 海淀区曙光街道举办第五届龙舟赛 2019-05-22
  • 竹编:缝隙里的乡愁文章中国国家地理网 2019-05-22
  • 乌鲁木齐市中级人民法院庭审在线直播 2019-05-22
  • 海南海口查处多名村组干部合伙侵占扶贫款案 2019-05-22
  • 2018广州中考语文作文题揭晓:《原来这么简单》 2019-05-21
  • 河北石家庄首家农村少年邮局揭牌 2019-05-21
  • 外媒称中俄合作攸关世界秩序 两国间很难被“插入楔子” 2019-05-21
  • 新华社评论员:永远做中国人民和中华民族的主心骨——三论习近平总书记在十三届全国人大一次会议上的重要讲话 2019-05-20
  • 两位幼童被瓜子花生卡喉 十堰市人民医院多学科协作成功取出 2019-05-20
  • 调查:六成老人感到幸福,西藏排第一,您家的呢?  2019-05-19
  • 为丰富百姓餐桌提供更多选择(打开对外开放新局面) 2019-05-19
  • 674| 500| 63| 505| 671| 307| 80| 388| 463| 308|