CSS3-Flexbox-Support?

Kirby 2 Solved ✅
1

Does kirby supports flexbox?

Tried to build a flexbox-grid but it doesn’t work :unamused:

This is the code:

<div class="row">
<div class="fluid">
    <?php if($article->template() == 'article.text'): ?>
    <article>
      <header>
      <?php foreach($article->images()->sortBy('sort', 'asc') as $image): ?>
        <figure>
        <a href="<?php echo $article->url() ?>"><img src="<?php echo $image->url() ?>" alt="<?php echo $article->title()->html() ?>"></a>
        </figure>
      <?php endforeach ?>
        <h2><a href="<?php echo $article->url() ?>"><?php echo html($article->title()) ?></a></h2>
        <div class="meta cf">
          <time datetime="<?php echo $article->date('c') ?>"><?php echo $article->date('F dS, Y'); ?></time>
          <?php if($article->tags() != ''): ?> 
          <ul class="tags">
          <?php foreach(str::split($article->tags()) as $tag): ?>
          <li><a href="<?php echo url('tag:' . urlencode($tag)) ?>">#<?php echo $tag; ?></a></li>
          <?php endforeach ?>
          </ul>
          <?php endif ?>
        </div>
      </header>
      <p><?php echo excerpt($article->text(), 100) ?></p>
      <p><a href="<?php echo $article->url() ?>">weiterlesen →</a></p>
    </article>
</div>
</div>

Sorry for my bad english!

2

Flexbox doesn’t have anything to do with Kirby itself. Kirby is the CMS (PHP) and we as developers can define the templates for it. Flexbox is CSS and not all browsers do support it (without vendor prefixes).

What do you want to achieve, actually?

3

Flexbox is a CSS feature and has nothing to do with Kirby. If you want to use flexbox, you have to do that in your stylesheet.

Edit:

@gerardkd was faster :wink:

Browser-support: http://caniuse.com/#search=flexbox

Tutorial on Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

4

Thanks, but i know how to work with flexboxes :stuck_out_tongue:

My problem is the repeat of the page, it doesn’t display the articles side by side …

Here is the code of jsfiddle:
https://jsfiddle.net/o6jutjho

5

Looking at your JSFiddle, I think you’re using flex wrong. display:flex; should be used on the container of all your flexed elements.

You’d need a wrapper around all your <div class="row"> and then define your css like this.

Example:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
}

.row {
  flex: 0 1 auto;
  align-self: auto;
}

Something in that manner. I assume you’re going to customize it to fit your needs and going to add the necessary prefiexes yourself or via Autoprefixer.

6

Thank you all for the help!

At the moment i can’t solve the problem :frowning: I’ve tried many ways, but it doesn’t work.

7

You also need to define properties for the article element itself, otherwise it’s recognized as a block-level element, and will take up the full width of its container (you’re naming this “.row”). In your example, .fluid and “article” are both assumed to be block elements. In your JSbin, can you please toss in your code for .fluid and <article> as well? It’s impossible to see what else could be wrong without having all the necessary code to look at. Also, I think on lines 75 + 76, your “endforeach” and “endif” statements are out of place. At the very least, the “endif” statement is incorrectly placed (I believe it should be directly after </article>).