3. Crazy geek


The original:
https://medium.com/swlh/css-f…

This article first send WeChat messages public number: jingchengyideng welcome attention, every day to push you fresh front-end technology articles

introduce

Flexbox is short for Flexible Box Module. Is a layout model that allows easy control over spatial distribution and alignment between HTML elements.

Flexbox can only control one dimension in a row or column at a time. For 2D control you need a CSS grid layout.

First, the following template is given:

<body> <div class="container"> <div class="box box-1">1</div> <div class="box box-2">2</div> <div class="box box-3">3</div> <div class="box box-4">4</div> <div class="box box-5">5</div> <div class="box box-6">6</div> <div class="box box-7">7</div> <div class="box box-8">8</div> <div class="box box-9">9</div> <div class="box box-10">10</div>  </div> </body>

The default behavior of the above div follows a normal HTML document stream and will be rendered from top to bottom, left to right, and take the width of the entire body because its display property defaults to block.

Elastic project

When display: flex is applied to.container div, all immediate child divs become flex-items and get the new behavior

  • They’re going to show up on the same line becauseflex-directionThe default isrow
  • They will be displayed from left to right

  • The items in it do not automatically stretch out to fit the entire width (principal axis), in order to do so, they shrink.

  • The item will be stretched to fit the cross axis (in this example, the height). If the height of the items is not consistent, they will be extended to the highest height
  • flex-basisThe default isauto(The project width will be determined by its content)
  • flex-wrapThe default isnowrap(If the container is not wide enough for these items, they do not wrap, but overflow.)

For visualization purposes, let’s stretch the container to the full height.

Elastic container

Display: Flex expands the container to the full available width. This is the opposite of display:inline-flex, which shrinks the container to the width of the content.

Elastic direction

Once declared as a Flex container, you can think of the element as having two axes: a principal axis and a crossover axis. The principal axis is defined by the flex-direction property. The cross axis is perpendicular to the former.

The flex-direction property has four values: row, row-reverse, column, and column-reverse.

Its default value is row, which sets the main axis horizontally from left to right, and the crosshafts are intercepted vertically from top to bottom. Similarly, the column value sets the main axis vertically from top to bottom and the cross axis from left to right. The opposite properties of these two options cause the principal axis to be reversed by 180°. The cross axes remain the same.

You can observe the flex-items behavior of these values by looking at the following:

Flex Wrap

When there is not enough space in the container to hold the elastic items in it, you can use flex-wrap to handle this.

By default, Flex-wrap is set to Nowrap, which means that if the container does not fit the original width of the items in the line within it, those items will be shrunk to fit. If they don’t shrink for any reason, they overflow the container.

Set the project width to 300px and the nowrap option will output the following:

Each item will be scaled down to about 70px to fit the container.

When the property is updated to wrap, the width of the project is now actually the original value of 300px. When the first line is not large enough to hold 300px, the item will wrap to a new line rather than overflow the container. Each of these rows should be thought of as a separate elastic container. The spatial distribution in one container does not affect the other containers adjacent to it.

But why do elastic items take up the entire screen height? In the first part, the container height is set to 100VH, so the available space is divided evenly into four rows to fit the needs of a 300px project. If we do not set 100vh, the height of the container will follow the height of the project content, as shown in the figure below:

The other option is wrap-reverse, which reverses the crossover axis. Setting it top to bottom with the flex-direction property, wrap-reverse converts it to bottom to top.

By inverting the principal axis using the flex-direction:column, the misaligned elements are redirected to another column and the rest of the space is evenly split.

The wrap-reverse option reverses the crossover axis from right to left along the column direction, producing the following output:

Since the flexbox is a one-dimensional layout, when inverting, the items are arranged from bottom to top (for the row direction), but the left and right structure is maintained, and only the cross axes are changed.

Elastic flow

Flex-direction and flex-wrap can be declared in a single property: flex-flow:[direction][wrap].

.flex-container {
  flex-flow : column wrap;
}

Gaps between projects

Let’s go back to row/wrap. You can fill the container by setting the project width: 33.3333% :

But if you want a gap between subdivs, they won’t wrap the way you want them to:

This little annoyance can be solved with the CSS function calc() :

.flex-item {width: calc(33.333333-40px); margin: 20px; }

To eliminate the space around the edges of the container, we can use negative margins on the container:

.flex-container {
  margin: -20px;
}

The sorting

The Order property allows you to change the visual sort items that appear. Sorts are assigned to groups. By default all elastic items are set to ORDER: 0, which means that all items belong to the same group and they will be located in the original order. In the case of two or more groups, the groups are sorted relative to their integer value.

In the example below, there are three ordinal groups: -1, 0, and 1, arranged in this order.

.box-3 { order: 1; }
.box-7 { order: 1; }
.box-8 { order: -1; }

This property redistributes items visually, but maintains their original source location when interacting, for example by traversal them using the TAB key. If the item order has an impact on accessibility, consider this. The same goes for Flex-Direction.

alignment



(This picture is uploaded repeatedly always wrong, please move to the original view)

In Flexbox, project alignment and spatial distribution along the axis can be controlled by four properties:

  • justify-content: Align all items in the spindle
  • align-items: Align all items in the cross axis
  • align-self: Align a single item in the crossover axis
  • align-content: Control the space between the flexible lines on the cross axis

justify-content

For containers, justify-content handles the alignment of items on the main axis. The six most commonly used options are: flex-start, flex-end, center, space-around, space-between, and space-instituted, with flex-start being the default. .

align-items

Also applicable to containers, the align-items property handles alignment in the direction of the cross axes. Its default value is Stretch. The other options are flex-start, flex-end, center, and baseline.

The Stretch option causes all items to stretch to the height of the container (if set) or to the height of the highest item [5]. The first image shows that the container height is set to 100VH and the second height is not set.

align-content

This is the last of the four properties applied to the Flex container, and the align-content allocates Spaces between elastic lines in the cross axes. As the latter, its initial values are stretch-and-justify content, and it accepts the following options: flex-start, flex-end, center, space-around, space-between, space-instituted.

align-self

The align-items property is actually implemented by setting align-self on all Flex items in the container. Global values can be overridden by setting align-self separately. It accepts the same value as align-items and ‘auto’ [5].

The auto option resets align-self to the value defined globally by the container through align-items.

Resize the Flexbox

The size and extensibility of an item can be controlled by three attributes: flex-grow, flex-shrink, and flex-basis. All three of these operate on the principal axis.

  • flex-grow: If there is additional space, how should each item be scaled up
  • flex-shrink: How do you shrink each project if you don’t have enough space
  • flex-basis: What the size of the project should be before setting the above two properties

flex-grow

The Flex Grow Factor set from this property is used to deal with the ratio of project sizes to each other.

The default value is 0, which means that if there is any free space, put it after the last item.

In the example above, the direction is set to row and the width of each elastic item is set to 60px. Since the container is 980px wide, the free space left is 680px. This space is called a positive free space.

If you set Flex-Grow to 1, the amount of positive space available is divided equally between resilient items. The width of each item will be increased by 136px for a total width of 196px.

By applying Flex-Grow: 2 to the third project, it gets twice as much free positive space as the other projects, which is 286px, compared to 173px for the other projects.

The following figure shows what happens when you set the value of an item’s flex-grow property to the number that corresponds to its content.

flex-shrink

Flash-shrink handles the project size when there is not enough free space to hold all the containers. It divides the negative free space between these items by narrowing them down.

The following figure shows a 980px wide container that contains five items of a width of 300px. Since there is no room for the required total width of 1500px, the default Flex Shrink Factor value is 1, which shrinks the width of each project evenly to 196px.

By setting the ratio of the third item to 2, it shrines to half the size of the rest of the items.

The last figure in this section shows what happens when the number corresponding to the content value of each item is set to the flex-shrink value.

flex-basis

Flex-basis is an attribute that checks the size each item should have before actually setting the available space. The default value is auto, and the item width is set explicitly by the width property, or the content width is taken. It also accepts pixel values.

The GIF below shows an 800px wide container with five flex items set to flex-basis:160px. This tells the browser to follow their 160px width and have no positive/negative free space if, ideally, there is enough space for all the items; If there is not enough space, then flex-shrink defaults to 1 and all items shrink evenly. If there is extra space, flex-grow defaults to 0, and the remaining space is put after the last item.

The next GIF shows setting item 1 to flex-shrink:10 and item 4 to flex-grow:10. For negative free space, the width of item 1 is reduced by a factor of 10. For positive free space, item 4 is 10 times wider than the rest of the space.

Flex-basis also accepts the value content, and regardless of whether its width is set or not, the width taken into account when calculating free space depends on the content in the project.

flex

The flex attribute, which is short for sequentially arranged flex-grow, flex-shrink, and flex-basis, accepts the following predefined values:

  • initial: Resets to the default value of flexbox, equivalent toflex: 0 1 auto
  • auto: flex-items can grow/shrink as needed, equivalent toflex: 1 1 auto
  • none: Fixed item, equivalent toflex: 0 0 auto
  • flex: 1: flex-items have the ability to scale,flex-basisSet to zero, equal to zeroflex: 1 1 0

Autoprefixer

For cross-browser compatibility issues, it is important to set properties with the necessary prefixes to ensure that all browsers are supported.

Manually and automatically prefixing each attribute can be a tedious task and makes the style difficult to maintain. Use Gulp to automate these tasks for you.

In order to be able to use Gulp, we must add it to the project as a dependency. This work is done in a package.json file, which is responsible for tracking project dependencies and their versions. Enter the following command in the terminal to create the file:

nmp init

You will be prompted for project information, and you can press enter until you are finished. The output file will look like this:

{"name": "project-name", "version": "1.0.0", "description": "project description", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Author Name", "license": "ISC" }

Install gulp globally:

npm install gulp -g

Install gulp and gulp-autoprefixer as project dependencies:

npm install gulp --save-dev
npm install gulp-autoprefixer --save-dev

They will appear in the package.json file under devDependencies.

Create a gulpfile.js file:

touch gulpfile.js

Add the following:

// gulpfile.js

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var options = { browsers: ['last 2 versions'], cascade: false };

gulp.task('styles', function() {
  return gulp.src('./styles.css')
             .pipe(autoprefixer(options))
             .pipe(gulp.dest('build'));
});

Gulp extracts the content from styles.css and passes it through gulp-autoprefixer. The results are saved in the Build folder.

reference

  1. What the Flexbox Course
  2. Basic Concepts of Flexbox — 25/03/2018
  3. Mastering Wrapping of Flex Items — 26/03/2018
  4. Ordering Flex Items — 26/03/2018
  5. Aligning Items in a Flex Container — 26/03/2018
  6. StackOverflow — 27/03/2018
  7. Controlling Flex Items Along the Main Axis — 28/03/2018
  8. Gulp
  9. Gulp Autoprefixer

The first send WeChat messages public number: Jingchengyideng

Welcome to scan the two-dimensional code to pay attention to the public number, every day to push you fresh front-end technology articles