title: How do I apply flex wrap to this django template
body: <p>I was inquiring about how to apply <code>flex-wrap</code> to the pictures in the template so that they are evenly distributed throughout the page and not in a column-like structure like in the current situation.</p>
  
  <p>I want the images in the 2nd template (blue-background) to align like the ones with white background. The code I have provided with the question created the 2nd template.</p>
  
  <p><a href="https://i.stack.imgur.com/m5Zvs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m5Zvs.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/SME5L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SME5L.png" alt="enter image description here"></a></p>
  
  <p>Here is the template code:</p>
  
  <pre><code>&lt;DOCTYPE = html&gt;
  &lt;html lang ="en"&gt;
  &lt;header&gt;
  {% block sidebar %}
  &lt;ul class = "sidebar"&gt;
  &lt;li&gt;&lt;a href ="/article/all"&gt;Articles&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href ="/article/create"&gt;Create Article&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  {% endblock %}
  &lt;/header&gt;
  
  &lt;body&gt;
  
  &lt;style&gt;
  body{
  display:flex;
  justify-content:space-around;
  text-align: center;
  background-color: lightblue;
  
  }
  
  .page{
  display:flex;
  flex-wrap:wrap;
  align-content:space-between;
  width:400px;
  text-align: center;
  margin:10px auto 20px auto;
  background-color: rgba(47,47,47,0.98);
  font-color:white;
  border-radius: 16px;
  }
  
  .sidebar{
  display:flex;
  justify-content:space-around;
  flex-direction:column;
  float:left;
  width:200px;
  border:1px solid #000;
  }
  
  .pic{
  display:flex;
  flex-wrap:wrap;
  /*justify-content:space-around;*/
  /*align-content:space-between;*/
  }
  
  &lt;/style&gt;
  
  
  {% block content %}
  
  &lt;h2&gt;Language is:{{language}}&lt;/h2&gt;
  enter code here
  &lt;h2&gt; Session Language is:{{session_language}}&lt;/h2&gt;
  
  {% if articles.count &gt; 0 %}
  
  {% for article in articles %}
  &lt;div class = "page"&gt;
  &lt;h2&gt;&lt;a href ='/article/get/{{article.id}}/'&gt;{{article.title}}&lt;/a&gt;&lt;/h2&gt;
  &lt;/div&gt;
  
  
  &lt;div class ="pic"&gt;
  {% if article.thumbnail %}
  &lt;p&gt;&lt;img class ="pic" img src = "/static/{{article.thumbnail}}/" width =    "               "200"/&gt;&lt;/p&gt;
  {% endif %}
  &lt;/div&gt;
  
  
  &lt;p&gt;{{article.bod|lower|truncatewords:"10"}}&lt;/p&gt;
  &lt;/div&gt;
  
  {% endfor %}
  {% endif %}
  
  &lt;p&gt;End Of Page&lt;/p&gt;
  
  {% endblock %}
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>VIEWS.PY</p>
  
  <pre><code>from django.shortcuts import render_to_response
  from article.models import Article
  from django.http import HttpResponse
  from forms import ArticleForm
  from django.http import HttpResponseRedirect
  from django.core.context_processors import csrf
  
  def articles(request):
  
  
  language = 'en-gb'
  session_language = 'en-gb'
  
  if  'lang' in request.COOKIES:
  language = request.COOKIES['lang']
  
  if  'lang' in request.session:
  session_language = request.session['lang']
  
  
  return render_to_response('articles.html',
                                                      {'articles' :Article.objects.all(),
                                                      'language': language,
                                                      'session_language': session_language})
  
  def article(request, article_id = 1):
  
  return render_to_response ('article.html',
                                                       {'article': Article.objects.get(id = article_id)})
  
  
  
  def language(request, language = 'en-gb'):
  
  response = HttpResponse("setting language to %s" % language)
  
  response.set_cookie("lang", language)
  
  request.session["lang"] = language
  
  return response
  
  def create(request):
  
  if request.POST:
  
  form = ArticleForm(request.POST, request.FILES)
  
  if form.is_valid():
  
  form.save()
  
  return HttpResponseRedirect("/article/all")
  
  else:
  form = ArticleForm()
  
  args = {}
  args.update(csrf(request))
  
  args["form"] = form
  
  return render_to_response("Create_Article.html",args)
  
  def like_article(request, article_id):
  
  if article_id:
  a = Article.objects.get(id = article_id)
  count = a.likes
  count += 1
  a.likes = count
  a.save()
  return HttpResponseRedirect('/article/get/%s' % article_id)
  </code></pre>
  
  <p>URLS.PY</p>
  
  <pre><code>from django.conf.urls import patterns, include, url
  from django.contrib import admin
  from django.views.debug import default_urlconf
  from . import views
  admin.autodiscover()
  
  urlpatterns = [
  
  url(r'^all/$', 'article.views.articles', name = 'articles'),
  url(r'^create/$', 'article.views.create', name = 'create'),
  url(r'^language/(?P&lt;language&gt;[a-z\-]+)/$', 'article.views.language', name = 'language'),
  url(r'^get/(?P&lt;article_id&gt;\d+)/$', 'article.views.article', name = 'article'),
  url(r'^like/(?P&lt;article_id&gt;\d+)/$','article.views.like_article'),
     #(r'^$', default_urlconf),
  </code></pre>
  
  <p>]</p>
  
  <p>MODELS.PY</p>
  
  <pre><code>from django.db import models
  from time import time
  
  
  def get_upload_file_name(instance, filename):
  return "uploaded_files/%s_%s" % (str(time()).replace(' . ', '_') , filename)
  
  
  "Create your models here"
  
  class Article(models.Model):
  
  title = models.CharField(max_length = 200)
  body = models.TextField()
  pub_date = models.DateTimeField("date published")
  likes = models.IntegerField(default = 0)
  thumbnail = models.FileField(upload_to = get_upload_file_name)
  
  def __unicode__(self):
  return self.title
  
  class Comment(models.Model):
  
  name = models.CharField(max_length = 200)
  body = models.TextField()
  pub_date = models.DateTimeField("date published")
  article = models.ForeignKey(Article)
  </code></pre>
  
  <p>FORMS.PY</p>
  
  <pre><code>from django import forms
  from models import Article, Comment
  
  class ArticleForm(forms.ModelForm):
  
  class Meta:
  model = Article
  fields = ("title", "body", "pub_date" ,"thumbnail")
  
  class CommentForm(forms.ModelForm):
  
  class Meta:
  model = Comment
  fields = ("name","body","pub_date")
  </code></pre>
  
  <p>SETTINGS.PY</p>
  
  <pre><code>import os
  BASE_DIR = os.path.dirname(os.path.dirname(__file__))
  
  DEBUG = True
  
  TEMPLATE_DEBUG = True
  
  ALLOWED_HOSTS = []
  
  
  INSTALLED_APPS = (
  
  'django.contrib.admin',
  'django.contrib.auth',
  #'django.contrib.auth.middleware.AuthenticationMiddleware'
  #'django.contrib.messages.middleware.MessageMiddleware'
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
  'article',
  )
  
  MIDDLEWARE_CLASSES = (
  
  'django.contrib.sessions.middleware.SessionMiddleware',
  'django.middleware.common.CommonMiddleware',
  'django.middleware.csrf.CsrfViewMiddleware',
  'django.contrib.auth.middleware.AuthenticationMiddleware',
  #'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
  'django.contrib.messages.middleware.MessageMiddleware',
  'django.middleware.clickjacking.XFrameOptionsMiddleware',
  )
  
  ROOT_URLCONF = 'brn.urls'
  
  WSGI_APPLICATION = 'brn.wsgi.application'
  
  DATABASES = {
  
  'default': {
  'ENGINE': 'django.db.backends.sqlite3',
  'NAME': 'C:/Users/BRIN/Bitnami Django Stack projects/brn/brn/goblin.db',
  }
  }
  
  EXAMPLE_DATABASES = {
  'default': {
  'ENGINE': 'django.db.backends.sqlite3',
  'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
  }
  }
  
  
  STATIC_URL = '/static/'
  
  MEDIA_ROOT = "C:/Users/BRIN/Bitnami Django Stack projects/brn/static/"
  
  MEDIA_URL  = '/media/'
  
  
  TEMPLATE_DIRS = "C:/Users/BRIN/Bitnami Django Stack projects/brn/static/html/",
  
  STATIC_URL = '/static/html/'
  
  STATICFILES_DIRS =(
  
  "C:/Users/BRIN/Bitnami Django Stack projects/brn/static/html/",
  )
  
  'STATICFILES_FINDERS = ( 
  
  'django.contrib.staticfiles.finders.FileSystemFinder',
  'django.contrib.staticfiles.finders.AppDirectoriesFinder',
  #'django.contrib.staticfiles.finders.DefaultStorageFinder',
  )
  
  TEMPLATE_LOADERS = (
  
  'django.template.loaders.filesystem.Loader',
  'django.template.loaders.app_directories.Loader',
  'django.template.loaders.eggs.Loader',
  )
  </code></pre>