CSS3 Flex布局(项目)

一、order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

二、flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

三、flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。

四、flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

五、flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

六、align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

Flex 布局教程:语法篇

CSS3 Flex布局(容器)

一、flex-direction属性

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。
<style>
.box{
    background: #0074D9;
    display: flex;
    flex-direction: row-reverse;
}
.box>div[class^="item"]{
    color: #FFFFFF;
}
</style>

<div class="box">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
    <div class="item4">item4</div>
    <div class="item5">item5</div>
</div>

二、flex-wrap属性

  • nowrap(默认):不换行。
  • wrap:换行,第一行在上方。
  • wrap-reverse:换行,第一行在下方。

三、flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

四、justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

五、align-items属性

align-items属性定义项目在交叉轴上如何对齐。

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

垂直居中

<style>
.box{
    background: #0074D9;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 500px;
}
.box>div[class^="item"]{
    color: #FFFFFF;
}
</style>

<div class="box">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
    <div class="item4">item4</div>
    <div class="item5">item5</div>
</div>

六、align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

Flex 布局教程:语法篇

JavaScript正则中\1\2的作用

一、示例

1. 验证6个相同的数字

var reg = new RegExp(/^(\d)\1{5}/g);
var a = '333333';
if(reg.test(a)) {
    alert('right');
} else {
    alert('wrong');
}

2. 验证3个相同的数字+3个相同的字母

var reg = new RegExp(/^(\d)\1{2}([a-z])\2{2}/g);
var a = '333aa1';
if(reg.test(a)) {
    alert('right');
} else {
    alert('wrong');
}

二、解释:

\1必须与小括号配合使用。

正则表达式中的小括号”()”。是代表分组的意思。 如果再其后面出现\1则是代表与第一个小括号中要匹配的内容相同。Link

原生JavaScript写AJAX

前端JavaScript:

function ajaxGet(url, obj) {
    var request;
    if(window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else {
        request = new ActiveXObject('Microsoft.XMLHTTP'); // 兼容IE
    }

    request.onreadystatechange = function() {
        if(request.readyState === 4) { // 4 请求完成
            if(request.status === 200) { // 200 页面成功加载
                console.log(request.responseText); // 成功 返回得到的文本
            } else {
                console.log(request.status); // 失败 返回状态码 如 404
            }
        } else {
            console.log('Requesting');
        }
    }
    /* 解析参数 */
    str = '?';
    for(key in obj) {
        str += (key + '=' + obj[key] + '&');
    }
    str = str.substr(0, str.length - 1);
    /* 发送 */
    request.open('GET', url + str);
    request.send();
}

ajaxGet('ajax.php', {
    'type': 'get',
    'data': 'test'
}); //get-test

后端PHP:

<!-- ajax.php -->
<?php
    echo $_GET['type'] . '-' . $_GET['data'];

不小心摔倒了

脚一滑从一米高的高空中,背部向下垂直落体。
屁股和脊椎着地,瞬间脑子进入混沌状态,视野模糊啥都看不清,耳朵听不见,说不出话。
站起来站不稳走两步又摔地上了,又站起来又摔了一次。
之后没在站起来,在地上蹲了大概5-10分钟左右,脑子才变得清醒。