Mastering layout

发表于 更新于 分类于

Flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.site-nav > li + li{
    margin-left: 1.5em;
}
.site-nav > .nav-right{
    margin-left: auto;
}

.column-main{
    flex: 2;
    /* flex-grow: 2; */
    /* flex-shrink: 1; */
    /* flex-basis: 0%; */
}

.login-form input:not([type=checkbox]):not([type=radio]){
    display:block;
    width:100%;
}
  • property
    • justify-content(horizonal)
    • align-items(vertical)
    • align-content(wrap)
    • align-self
  • flexbugs
  • autoprefixer
  • automatiealy creates column of equal height

Grid

  • property

    • grid line
    • grid track
    • grid cell
    • grid area

  • naming grid line

  • naming grid area

  • auto

    • grid-auto-rows
    • auto-fill
    • auto-fit
    • object-fit (image)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container{
    grid-template-rows: repeat(4,auto)
}
header,nav{
    grid-column: 1 / 3;
    grid-row: span 1;
}

.portfolio{
    display:grid;
    grid-template-rows: repeat(auto-fill,minmax(200px,1fr));
    grid-auto-rows: 1fr;
    grid-gap: 1em;
    grid-auto-flow: dense;
}
.portfolio .featured{
    grid-row: span 2;
    grid-column: span 2;
}

@suports (display: grid){
    ...
}

position and stacking contexts

  • not positioned
    • static
  • positioned
    • fixed
      • viewport
      • Tip:use it for modal dialogs
    • absolute
      • the closest positioned ancenstor element
      • Tip: dropdown menus,tooltips,dynamic interactions
    • relative
      • relative to where they where
      • unlike fixed and absulte,you can’t use top,right,bottom,left to change size
      • tip:It is usually used to set absolute container as relative
    • sticky
      • scroll normal untill reach some place
      • remember parent must be higher than sticky element
      • tip: is surpported
  • css triangle
  • stacking order
    • z-index
      • can’t over ancenstor order
      • careful use,or by custom properties
0%