Flex Layout (Part 1 — Container Properties)

Zero, preface,

I’ve heard about Flex layout before, but I haven’t studied it in detail. So I’ll use React to play around. When I meet a new knowledge, HOW to learn a lot of parameters makes me confused. Can deal with the change of only the change itself with their own ability to learn the object is not static, like you are communicating with a live person rather than doll this article is not React basic tutorial, also not Flex layout tutorial, just do a Flex layout demo source code see the end of the jie text specification

No nonsense, leave the town building:

---

I. Building React Project:

1. Create a + SCSS configuration

Personally, I prefer SCSS. The latest Create-React-app webpack already configudes SCSS by adding Nod-Sass

npm i create-react-app
npm i node-sass -D
Copy the code

---

2. Create a static page

---

2.1:.FlexRectangle div(default width by 1000 x 300px)

.Flex { border: red 2px solid; margin-top: 20px; margin-left: 20px; width: 1000px; height: 300px; Background - color: rgba (71,71,71, 6); display: flex; .title { border-radius: 10px; font-size: 30px; text-align: center; }}Copy the code

---

2.2– Data Preparation:

export class AttrData {
    static getAttrData() {

        let justifyContent = {
            index: 0,
            data: ["normal"."flex-start"."flex-end"."center"."space-between"."space-around"]};let flexDirection = {
            index: 0,
            data: ["row"."row-reverse"."column"."column-reverse"]};let flexWrap = {
            index: 0,
            data: ["nowrap"."wrap"."wrap-reverse"]};let alignItems = {
            index: 0,
            data: ["normal"."stretch"."flex-start"."flex-end"."center"."baseline"]};let alignContent = {
            index: 0,
            data: ["normal"."stretch"."flex-start"."flex-end"."center"."space-between"."space-around"]};return{justifyContent, flexDirection, flexWrap, alignItems, alignContent}; } /** * Set properties * @param attr * @returns {*} */ static getAttrLooped(attr) {returnattr.data[attr.index % attr.data.length]; } @param attr * @returns {*} */ static getAttr(attr) {returnattr.data[attr.index]; }}Copy the code

2.3– Data filling

// Get Data and function const attrData = data.getAttrData (); const getAttrLooped = Data.getAttrLooped; const getAttr = Data.getAttr;let justifyContent = attrData.justifyContent;
let flexDirection = attrData.flexDirection;
let flexWrap = attrData.flexWrap;
let alignItems = attrData.alignItems;
letalignContent = attrData.alignContent; Div className= <div className="Flex" style={{
    width: this.state.ctrl[1].data + "px",
    height: this.state.ctrl[2].data + "px",
    flexDirection: getAttrLooped(flexDirection),
    flexWrap: getAttrLooped(flexWrap),
    justifyContent: getAttrLooped(justifyContent),
    alignItems: getAttrLooped(alignItems),
    alignContent: getAttrLooped(alignContent)
}}>
    {this.formItem()}
</div>
Copy the code

2.5– Generate several entries

Auxiliary function: Random color :Logic. RandomRGB

@returns {string} */ static randomRGB(a = 1) {return `rgba(${this.rangeInt(0, 255)}.${this.rangeInt(0, 255)}.${this.rangeInt(0, 255)}.${a})`
}
Copy the code

Dynamically generates random colored items from an array: Flex.formItem

formItem() {
    let color = [];
    for (let i = 0; i < this.state.ctrl[0].data; i++) {
        color.push(Logic.randomRGB(.8))
    }
    return (
        color.map((item, index) => {
            return (
                <div className={"title"} style={{backgroundColor: item}} key={index}> Toly{index} </div> ); }}))Copy the code

---

3. Components in the bottom bar:ListInfo.js

<ListInfo data={this.state.flexObj}
          onItemClick={this.onItemClick.bind(this)}/>
Copy the code

---

3.1 Data acquisition:flexObj:

/** * Bottom listen -- attribute change */notifyAttrChanged() {
    this.setState({
        flexObj: {
            "flex-direction": getAttr(flexDirection),// element alignment direction"flex-wrap": getAttr (flexWrap), / / a newline"justify-content": getAttr(justifyContent),// Justifications are horizontal"align-items": getAttr(alignItems),// Vertical alignment"align-content": getAttr(alignContent),// multi-line vertical alignment,}}); }Copy the code

---

3.2: Data display:ListInfo.js

import React, {Component} from 'react';
import './ListInfo.scss'

class ListInfo extends Component {
    render() {
        return (
            <div className="ListInfo"> {this.formList(this.props. Data)} </div>)let datas = [];
        for (let key in data) {
            datas.push({
                    name: key,
                    data: data[key]
                }
            );
        }

        return (
            <div id="list-container">
                {datas.map((item, index) => {
                    return(// Here click callback onItemClick, capture index <div key={index} className="card" onClick={() => {
                            this.props.onItemClick && this.props.onItemClick(index);
                        }}>
                            {item.name}:<br/>
                            {item.data}<br/>
                        </div>
                    )
                })}
            </div>
        )
    }
}
Copy the code

---

3.3: Style:ListInfo.scss

#list-container {
  display: flex;

  .card{
    background-color: #26A5F8;
    cursor: pointer;
    margin-top: 20px;
    margin-left: 30px;
    padding: 10px;
    font-weight: bold;
    font-size: 24px;
    border-radius: 10px;
    box-shadow: #61dafb 2px 2px 10px 2px;}}Copy the code

---

4. Control interface in the right column:

4.1: State data:Flex.js

this.state = {
    flexObj: ' ',
    ctrl: [
        {
            data: 10,
            info: "Number of Items",
            fun: (input) => {
                this.notifyInputChanged(0, input)
            }
        },
        {
            data: 1000,
            info: "Container width",
            fun: (input) => {
                this.notifyInputChanged(1, input)
            }
        },
        {
            data: 300,
            info: "Container height",
            fun: (input) => {
                this.notifyInputChanged(2, input)
            }
        },
        {
            data: "auto",
            info: "Item width",
            fun: (input) => {
                this.notifyInputChanged(3, input)
            }
        },
        {
            data: "auto",
            info: "Item height",
            fun: (input) => {
                this.notifyInputChanged(4, input)
            }
        }
    ]
}
Copy the code

---

4.2: receive data, render interface + callbackCtrlBox.js

import React, {Component} from 'react';
import './CtrlBox.scss'

class CtrlBox extends Component {

    render() {
        return (
            <div className="right-ctrl">
                {this.createItem(this.props.ctrl)}
            </div>
        )
    }

    createItem(ctrl) {
        return (
            ctrl.map((item, index) => {
                return (
                    <div className={"container"} key={index}> <label>{this.props.ctrl[index].info}:</label> <input onChange={ (v) => { this.bindCallback(index, v); }} defaultValue={this.props.ctrl[index].data}/> <label>px</label> </div> ); }))} /** * Bind callback events * @param index * @param v */bindCallback(index, v) {
        switch (index) {
            case 0:
                this.props.onCountChanged(v.target.value);
                break;
            case 1:
                this.props.onBoxWidthChanged(v.target.value);
                break;
            case 2:
                this.props.onBoxHeightChanged(v.target.value);
                break;
            case 3:
                this.props.onItemWidthChanged(v.target.value);
                break;
            case 4:
                this.props.onItemHeightChanged(v.target.value);
                break;
            default:
                break; }}}export default CtrlBox;
Copy the code

---

4.3 Callback function and its use:Flex.js

<CtrlBox
    ctrl={this.state.ctrl}
    onCountChanged={this.state.ctrl[0].fun}
    onBoxWidthChanged={this.state.ctrl[1].fun}
    onBoxHeightChanged={this.state.ctrl[2].fun}
    onItemWidthChanged={this.state.ctrl[3].fun}
    onItemHeightChanged={this.state.ctrl[4].fun}/>
Copy the code

With both the static page and the callback implemented, all you need to do is write the specific logic for the callback

---

Three, the specific logic of the callback

---

1. Dynamically change the data when clicking the item below

/** * Click on the bottom item * @param index */ onItemClick(index) {switch (index) {case 0:
            flexDirection.index++;
            break;
        case 1:
            flexWrap.index++;
            break;
        case 2:
            justifyContent.index++;
            break;
        case 3:
            alignItems.index++;
            break;
        case 4:
            alignContent.index++;
            break;
        default:
            break;
    }
    this.notifyChanged();
}
Copy the code

---

2: Listens for changes in input data

@param input */ notifyInputChanged(index, input) {@param input */ notifyInputChanged(index, input) {let ctrl = this.state.ctrl;
    ctrl[index].data = input;
    this.setState({
        ctrl
    });
}
Copy the code

Seems quite complicated function, also is actually this code, the focus is on data to grasp with the object of packaging is not the start I can become that the data as a whole, also is met, see can merge, merger, scattered at upset properties It also depends on the Android (or Java) let me deeply in cognition of object, so what is connected, When you have a mind, everything is easy

---

Postscript: Jie wen standard

1. Growth record and Errata of this paper

Program source code	The date of	note
V0.1 – making	The 2018-12-9	Flex Layout (Part 1 — Container Properties)

2. More about me

Pen name	QQ	WeChat	hobby
Zhang Feng Jie te Li	1981462002	zdl1994328	language
My lot	My Jane books	I’m the nuggets	Personal website

3. The statement

1—- this article is originally written by Zhang Feng Jetelie, please note 2—- all programming enthusiasts are welcome to communicate with each other 3—- personal ability is limited, if there is any error, you are welcome to criticize and point out, will be modest to correct 4—- See here, I thank you here for your love and support

---