Flex news template

Here is a basic template for a news article using Flexbox:

HTML

<div class="news-container">
  <div class="news-header">
    <h1 class="news-title">News Title</h1>
    <p class="news-date">Date</p>
  </div>
  <div class="news-content">
    <p>News content goes here.</p>
    <p>News content goes here.</p>
    <p>News content goes here.</p>
  </div>
  <div class="news-footer">
    <p>Source: [Source URL]</p>
  </div>
</div>

CSS

.news-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.news-title {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.news-date {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.news-content {
  padding: 20px;
}

.news-footer {
  padding: 10px;
  border-top: 1px solid #ccc;
}

.source-url {
  font-size: 14px;
  color: #666;
  margin: 0;
}

This template uses Flexbox to create a responsive layout for the news article. The .news-container div is the main container for the article, and it uses Flexbox to center the content horizontally and add some padding and margin.

The .news-header div is used to display the title and date of the article, and it uses Flexbox to align the title and date to the left and right sides of the container, respectively.

The .news-content div is used to display the main content of the article, and it uses padding to add some space between the content and the borders.

The .news-footer div is used to display the source of the article, and it uses padding to add some space between the footer and the borders.

You can customize this template to fit your specific needs by adding or modifying CSS styles as needed.