css3之flex伸缩布局详解

下面介绍一种比用浮动定位更灵活的布局方式,是的,就是flex伸缩布局,flex伸缩布局也常用于移动端的布局,因为相对于possion,float,采用flex伸缩布局更灵活,也相对的对手机的资源消耗较少!

伸缩布局会用到的属性

  1. display: flex;让元素编程伸缩容器
  2. flex-direction:row|row-reverse|column|column-reverse主轴方向,加reverse就是表示相反的方向
  3. justify-content:flex-start|flex-end|center|space-around|space-between设置伸缩项目在主轴方向上的对其方式
  4. flex-wrap: wrap(换行)|nowrap(不换行)控制伸缩项目是否换行
  5. align-content:flex-start|flex-end|center|space-around|space-between处理换行后的结果
  6. align-items:stretch|flex-start|flex-end|center处理不换行的结果(侧轴对齐)
  7. flex: 1;控制伸缩项目在伸缩容器中所占的剩余空间
  8. align-self:flex-start|flex-end|center|space-around|space-between个别调整元素位置
  9. order: 10;是用来调整顺序的 规则: 数字越小 元素越靠前

下面给出排列顺序的代码,其他属性请大家自行测试

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>排列顺序</title>
<style>
    ul {
        width: 500px;
        height: 500px;
        list-style: none;
        border: 1px solid #000;
        margin: 0 auto;
        padding: 0;
    }
    li {
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #ccc;
        background-color: hotpink;
        float: left;
    }
    ul {
        display: flex;
    }
    li:nth-child(1) {
        order: 5;
    }

    li:nth-child(2) {
        order: 2;
    }
</style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端人人

React第三方组件5(状态管理之Redux的使用①简单使用)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

2644
来自专栏Google Dart

AngularDart Material Design 弹出框 顶

该组件将自己发布为DropdownHandle,因此其子级可以通过注入来控制其可见性:

1923
来自专栏Windows Community

Windows Phone 8.1 新特性 - 控件之FlipView

本篇为大家介绍 Windows Phone 8.1 中新增的 FlipView 控件,它的中文名字叫做:翻转视图。 虽然听起来有点拗口,但是它的用途大家一定不会...

35210
来自专栏王磊的博客

react-native多图选择、图片裁剪(支持ad/ios图片个数控制)

前言:   目前关于rn比较知名并且封装好的图片选择控件很多,不过能同时支持多图片上传,个数控制兼容iOS/Ad的却寥寥无几,而今天介绍的这款框架可以实现:图片...

48514
来自专栏王磊的博客

vscode使用汇总——常用插件、常用配置、常用快捷键

一、代码提示快捷键设置:(keybindings.json) [ { "key": "ctrl+j", "command...

5047
来自专栏京东技术

Vue拖拽组件开发实例

vue是一套用于构建用户界面的渐进式框架。可以用他来封装单文件组件来开发更为复杂的单页应用。 本文主要是通过封装一个拖拽组件的例子,来分析Vue组件化相关知识。

91213
来自专栏微信小开发

五分钟掌握微信小程序轮播图

从公共库v1.4.0开始,change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下: autoplay 自动播放导致 swip...

2366
来自专栏24K纯开源

ChartDirector应用笔记(三)

前言 继上篇文章(Simple bar chart)推出之后,本篇文章继续ChartDirector的使用。在这篇Blog中,博主实现的是soft lighti...

23810
来自专栏向治洪

React Native导航器之react-navigation使用

在上一节Navigation组件,我们使用系统提供的导航组件做了一个跳转的例子,不过其实战能力不强,这里推荐一个超牛逼的第三方库:react-navigatio...

2K7
来自专栏极乐技术社区

微信小程序开发详解《五》布局基础

1:Flex布局 Flex布局如图所示 image.png 1.1 Flex容器属性 image.png 1.2 Flex容器内元素属性 image...

6245

扫码关注云+社区

领取腾讯云代金券