css Flexgrid中的中心列

Posted 2021-05-13

.uk-container.uk-container-center
  .uk-grid.uk-margin-large-top.uk-grid-match.uk-grid-width-1-2.uk-grid-width-medium-1-3.uk-flex.uk-flex-center(data-uk-grid-match="{target:'.uk-panel'}", data-uk-grid-margin='')
    div
      .uk-panel.uk-panel-box
        h3 Phasellus ultrices
        p
          | Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.
    div
      .uk-panel.uk-panel-box
        h3 Phasellus ultrices
        p
          | Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.
    div
      .uk-panel.uk-panel-box
        h3 Phasellus ultrices
        p
          | Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.
    div
      .uk-panel.uk-panel-box
        h3 Phasellus ultrices
        p
          | Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.
    div
      .uk-panel.uk-panel-box
        h3 Phasellus ultrices
        p
          | Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.

<div class="uk-container uk-container-center">
<h3 class="uk-margin-top">Tab autoplayer</h3>
  <ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
    <li><a href="">Tab 1</a></li>
    <li><a href="">Tab 2</a></li>
    <li><a href="">Tab 3</a></li>
  </ul>
  <ul id="my-id" class="uk-switcher uk-margin">
    <li><a href="#" id="autoplayer" data-uk-switcher-item="next"></a>
     This slide contains a hidden link, that selects the next slide when clicked. The click is simulated by jacascript to mimic autoplay.
      </li>
    <li>Content 2</li>
    <li>Content 3</li>
  </ul>

  <h3>Load with second tab active</h3>
  <ul class="uk-tab" data-uk-tab="{connect:'#my-id2'}">
    <li><a href="">Tab 1</a></li>
    <li class="uk-active"><a href="">Tab 2</a></li>
    <li><a href="">Tab 3</a></li>
  </ul>
  <ul id="my-id2" class="uk-switcher uk-margin">
    <li>Content 1</li>
    <li>Content 2 (first open) just add <code> class="uk-active"</code> to the active tab.</li>
    <li>Content 3</li>
  </ul>

  <h3>Load from url</h3>
  <ul class="uk-tab" data-uk-tab="{connect:'#my-id3'}">
    <li id="tab1"><a href="">Tab 1</a></li>
    <li id="tab2"><a href="">Tab 2</a></li>
    <li id="tab3"><a href="">Tab 3</a></li>
  </ul>
  <ul id="my-id3" class="uk-switcher uk-margin">
    <li>Content 1</li>
    <li>Content 2 (first open)</li>
    <li>Content 3</li>
  </ul>

  <ul class="uk-subnav uk-subnav-line">
  <li><a href="http://codepen.io/malles/debug/BNXrmO#tab1">Open with tab 1</a></li>
    <li><a href="http://codepen.io/malles/debug/BNXrmO#tab2">Open with tab 2</a></li>
    <li><a href="http://codepen.io/malles/debug/BNXrmO#tab3">Open with tab 3</a></li>
  </ul>


  <ul id="my-id3" class="uk-switcher uk-margin">
    <li>Content 1</li>
    <li>Content 2</li>
    <li>Content 3</li>
  </ul>

    <h3>Control with JS</h3>
  <ul class="uk-tab" id="js-control" data-uk-tab="{connect:'#my-id4'}">
    <li id="tab1"><a href="">Tab 1</a></li>
    <li id="tab2"><a href="">Tab 2</a></li>
    <li id="tab3"><a href="">Tab 3</a></li>
  </ul>
  <ul id="my-id4" class="uk-switcher uk-margin">
    <li>Content 1<br>
    <code>UIkit.switcher('#js-control').show(0);</code></li>
    <li>Content 2<br>
    <code>UIkit.switcher('#js-control').show(1);</code></li>
    <li>Content 3<br>
    <code>UIkit.switcher('#js-control').show(2);</code></li>
  </ul>

  <ul class="uk-subnav uk-subnav-line">
  <li><a onclick="UIkit.switcher('#js-control').show(0);">Open tab 1</a></li>
    <li><a onclick="UIkit.switcher('#js-control').show(1);">Open tab 2</a></li>
    <li><a onclick="UIkit.switcher('#js-control').show(2);">Open tab 3</a></li>
  </ul>

</div>

/*    this css it´s not required  */
html{
  height: 100%;
}
body {
  min-height: 100%;
}
body { background-color: #dadada; }

.uk-panel-box {
 background-color: #FFFFFF;
 -webkit-box-shadow: 0px 4px 8px rgba(51,51,51,.12);
 box-shadow: 0px 4px 8px rgba(51,51,51,.12);
 border-radius: 3px;
}
h3 {
  font-weight: 600;
  padding-top: 0.6em;
  padding-bottom: 0px;
}