Flexbox for noobs

-

Making a CSS block grid is super easy with Flexbox. Check out this basic example I made.

All you need to do is add the following lines of CSS:

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  width: 25% //This makes 4 columns per row. Adjust to taste
  //flex-basis: 25% also works as well
}

If you want all the grid items to have the same height, add "display: flex" to each of the list items.

Comments

Post a Comment

Popular posts from this blog

Docker for noobs

-
Source Create your Dockerfile FROM debian:jessie # Replace shell with bash so we can source files RUN rm /bin/sh && ln -s /bin/bash /bin/sh # Set environment variables ENV appDir /var/www/app/current # Run updates and install deps RUN apt-get update RUN apt-get install -y -q --no-install-recommends \     apt-transport-https \     build-essential \     ca-certificates \     curl \     g++ \     gcc \     git \     make \     nginx \     sudo \     wget \     && rm -rf /var/lib/apt/lists/* \     && apt-get -y autoclean ENV NVM_DIR /usr/local/nvm ENV NODE_VERSION 6.9.1 # Install nvm with node and npm RUN curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash \     && source $NVM_DIR/nvm.sh \     && nvm install $NODE_VERSION \    ...
Read more

Symlinking

-
const execSync = require('child_process').execSync execSync("rm -rf node_modules/@app && ln -sf ../src node_modules/@app") execSync("[ -h ./node_modules/@static ] || ln -sf ../static ./node_modules/@static")
Read more