Laravel

Valeri Tandilashvili's CSS Notes

Results: 126

We can make CSS selector more specific using attribute's certain value

.my-form input[type="text"]{
    padding: 8px;
    width: 100%;
}

In this example, only inputs will be selected with types

text

object-fit: cover CODE

The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit.

flex-wrap: nowrap

nowrap

is the default value of the property. The value Specifies that the flexible items will not wrap. Resource: https://youtu.be/k32voqQhODc?t=1154

Space between items using

margin-right

property:

.container div {
    margin-right: 40px;
}
.container div:last-child {
    margin-right: 0px;
}

Flex way of space between flex items:

.container {
    display: flex;
    justify-content: space-between;
}
.container div {
    flex-basis: 30%;
}

flex:1 as shorthand

.flex-item:nth-child(1) {
  flex:1;
}

The above

flex

property is a shorthand of the following properties:

.flex-item:nth-child(2) {
  flex-grow:1;
  flex-shrink:1;
  flex-basis:0;
}

In the example, the first two elements have the same effect

Several ways to avoid Math calculations CODE

.main-inner div

1. Subtract padding & border from width https://youtu.be/qhiQGPtD1PQ?t=137 2. Add inner div with padding https://youtu.be/_Ai-_nZ6bw4?t=269 3. Use

box-sizing: border-box

property https://codepen.io/Tandilashvili/pen/yLeJvLO

margin: auto CODE

margin: auto

is an alternative to

justify-content: center

and

align-items: center

. Instead of this code on the flex container:

.container {
    justify-content: center;
    align-items: center;
}

We can use

margin: auto

the flex item:

.container div {
    margin: auto;
}

(when there is only one flex item)

flex-direction: row-reverse CODE

.container {
  display: flex;
  flex-direction: row-reverse;
}

The direction of the flexible items inside the .container is set in reverse order.

order

The property is used to reorder flex items. The default value is

. Negative numbers are also accepted

.main-column {
    flex: 3;
    order: 2;
}
.sidebar-one {
    flex: 1;
    order: 1;
}

#nav li {
    list-style: none;
    float: left;
    padding: 0 15px 0 0;
}

Results: 126